Good Morning Web - Ayano's Portfolio -

WordPressとは？

コンテンツ管理システム（CMS）として利用されるソフトウェアの一種

WordPressは、通常のウェブサイトを構成するHTMLではなく、PHPを使って開発されたブログソフトウェアです。しかし、今ではブログ以外にもコンテンツ管理システム（CMS）としても多く利用されています。そして、WordPressはオープンソースであることから誰でも手軽に利用でき、かつ修正や頒布も自由に行えます。

WordPressを利用するメリット

• 無料で利用できる

WordPressを動かすためにサーバーやデータベースが必要となりますが、WordPressというソフトウェア自体は誰でも無料で利用することができます。

• 記事の投稿が手軽に操作できる

ブログやお知らせなどの記事が手軽に作成、編集、投稿できるので、更新の都度HTMLや複雑なコードを編集しなくても良いというメリットがあります。

• デザインテーマの種類が豊富

有料テーマはもちろん、無料テーマでも十分にオシャレで実用的なデザインのものが多く開発されています。テーマをインストールして適用するだけで、一瞬でキレイな見た目のウェブサイトが作れるのもWordPressの良いところです。

• プラグイン拡張機能を使ってカスタマイズが可能

コンタクトフォームの設置や複雑なSEO対策なども、プラグインをインストールして必要な部分を入力するだけで、簡単に機能を追加できます。

他にも多くのメリットがありますが、無料で使える、簡単にウェブサイトを更新することができる、デザインテーマが豊富にある、機能を簡単に追加できることが大きな魅力となっています。

WordPressを利用するデメリット

• サイトの読み込みが遅くなる

利用しているテーマやプラグイン、その他サーバー等の設定にもよりますが、基本的なHTMLとCSSなどで構成されているウェブサイトに比べると、サイトの読み込みが遅くなる傾向にあります。便利だからと大量のプラグインをインストールして適用していると、ウェブサイトを開く際に大きな負荷がかかり、読み込む時間が長くなってしまうことがあります。

• 細かい部分のカスタマイズには専門知識が必要

テーマを利用して手軽にウェブサイトを作れるのが魅力ですが、テンプレート的なデザインになってしまいがちです。しかし、「この部分はこうしたいな…」と思うところがあっても、どのファイルのどの部分を修正するのかがわからなければカスタマイズができません。functions.phpなどの重要なファイルでエラーを起こしてしまうと、それだけでWordPressが動作しなくなることもあります。

WordPressは便利ですが、ウェブサイトの規模や更新頻度、機能性を考慮した上で導入するかどうかを判断しましょう。
また、修正可能な技術者の場合でも、テーマカスタマイズの前には必ずバックアップを行うことが基本です。

WordPressテーマを制作する前に知っておくべき5つのこと

HTMLではなくPHPで作られている

WordPressを構成するファイルは、index.php、archive.php、single.phpといったPHPファイルです。PHPとは、動的なウェブページを生成できるサーバーサイドのスクリプト言語のことです。
PHPはHTMLのソースコードの中にPHPのコードを書き込むだけで動的なウェブページに開発できます。元のHTMLファイルに書き加えたり、部分的に変更して利用するので、PHPファイルを0から制作するのではなく、index.htmlなどのサイト構成ファイルを編集して、PHPによる機能を追加していきます。

開発にはサーバー＆データベースが必要

WordPressの開発にはサーバー、データベースが必要になります。これは、WordPressがPHPおよびMySQLを利用しているからです。それぞれの役割は以下の通り。

• PHP

データベースと連携し、情報を取得するプログラム

• MySQL

ユーザーデータのほか、記事タイトル・本文、コメントなど様々なデータを保存するデータベース

WordPressのデータベースの役割については、下記リンク先の記事でわかりやすく説明されています。

通常、WordPressを利用していてデータベースまで操作することは滅多にありません。WordPressを利用するためにはプログラムを動かすサーバーとデータベースが必要であるという事を知っておきましょう。

WordPressの日本版公式サイトには、動作条件としてPHPやMySQLまたはMariaDBのバージョンが指示されています。開発の際にはバージョンの確認をし、更新の必要があれば必ず事前にバックアップをとりましょう。

jQueryが標準で組み込まれている

jQueryとはJavaScriptで作成されたライブラリのことで、ウェブページに動的なアニメーション等を付加することができます。

WordPressにはjQueryが標準で組み込まれており、CDNやファイルを用意しなくてもjQueryが利用できます。最新のWordPressバージョン5.8では、jQueryのバージョンはv3.6.0となっており、こちらも最新バージョンが同梱されています。（※2021年10月3日現在）
そのため、jQueryを使って開発する際には、

1. WordPressで用意されたjQueryを利用する
2. 自分でjQueryを用意し、読み込んで利用する

この2つの選択肢があります。
しかし、後者のように自分でjQueryを読み込んで利用しようとした場合に、標準で組み込まれているWordPress内のjQueryと競合してしまったり、読み込まれるタイミングが異なることによって、うまく動作しなくなるケースが多々起こります。
また、一般的なjQueryの記述方法とWordPressでのjQueryの記述方法が異なる点も注意が必要です。

$(function () {
  $("button").on("click", function () {
    $(".sample").hide();
  });
});

WordPressでjQueryを利用するためには、$をjQueryという文字に置き換えます。

jQuery(function () {
  jQuery("button").on("click", function () {
    jQuery(".sample").hide();
  });
});

jQuery(function ($) {
  $("button").on("click", function () {
    $(".sample").hide();
  });
});

ここでは詳しく述べませんが、ウェブサイトを制作していて通常通り動作していたアニメーションがWordPressでは上手く動かなくなる原因として、WordPressにjQueryが標準で組み込まれていることが影響します。そして、今後のバージョンアップやブラウザへの対応なども考慮し、どのようにjQueryを利用するかを判断しましょう。

テーマを構成するための必要最低限のファイル

WordPressテーマを動かすために必要最低限のファイル構成を「SampleTheme」というテーマを作る場合を例にしてみました。SampleThemeフォルダには以下のようなファイルを作成する必要があります。

極端な例ですが、これらがWordPressでホームページを表示するために必要なファイルです。
各ファイルの役割は以下の通り。

最低限、これらのファイルがあればWordPressのテーマが作れます。しかし、投稿した記事を個別に表示するためのsingle.phpや、タグ・カテゴリーごとに記事を表示するためのtag.php、category.phpなど、WordPressは用途が異なる特定のページ毎にPHPファイルを設定する必要があります。そのため、開発するテーマによってどのファイルが必要になるかを判断し、テンプレート階層を参考にPHPファイルを作成します。

表示するページの内容はテンプレート階層の優先度によって決まる

テンプレート階層については、WorcPress Codex日本語版のページにある参考画像を見ると理解しやすくなります。

テンプレート階層は、利用されるPHPファイルの優先度を示します。

たとえば、投稿された記事の「個別投稿ページ」を表示したい場合、テーマ内ファイルにsingle.phpが作成されていないときは、singular.phpの内容が反映されます。しかし、singular.phpも作成されていなかった場合は、index.phpの内容が反映されます。

また、「sample」というスラッグのカテゴリーを作成し、同じカテゴリーの記事をまとめて表示させたい場合、category.phpを作成していればcategory.phpの内容が反映されます。しかし、「sample」のカテゴリーのみ、他のカテゴリーとは違うデザインや内容を反映したい場合には、category-sample.phpを作成することでcategory.phpよりも優先度が高くなり、category-sample.phpの内容が反映されるようになります。

スラッグとは、WordPressで表示される名称とは別に設定する文字列のことです。カテゴリー毎のページを表示する際、URLに利用されます。
当サイトでは「コーディング」というカテゴリーに「code」というスラッグを設定しており、「コーディング」の記事一覧ページは「 https://ohayo-web.com/archives/category/code 」というURLになります。

このように、WordPressで表示される各ページの内容はテンプレートの優先度によって決まります。
最低限の構成ファイルを除き、これらすべてのテンプレートファイルを作成する必要はありませんが、投稿内容、その他機能や目的に合わせて各種テンプレートを作成する必要があります。その都度、テンプレート階層を確認し、スラッグやID名に合わせてテンプレートファイルを作成しましょう。

まとめ

この記事では「WordPressとはそもそも何か」、「ＷordPressでどのようにウェブサイトができているのか」という点を踏まえ、ウェブサイトをWordPressテーマにする前に知っておくべき基礎知識をお伝えしました。

よく聞くけどWordPressって何？という疑問がある方や、これからWordPress開発を目指す方の理解が深まれば嬉しいです！