webサイトの制作に!WordPressの仕組みや使い方を理解しよう

記事公開日:2018.04.17

482 PV

webサイト制作といえば、WordPress(ワードプレス)を使うことが多くなっています。弊社のwebサイト制作もクライアント様のユーザビリティを考え、WordPress(ワードプレス)を使ってのホームページ制作がほとんどです。

WordPress(ワードプレス)って何?


WordPress(ワードプレス)とは、無料で使えるブログソフト(CMS)です。世界でも圧倒的なシェアを獲得しています。WordPressの中に、ブログとしての投稿機能やページを更新するシステムが組み込まれているので、webサイト制作やページ作成・更新作業やwebサイトの運営などがとても簡単にすることができます。
更に、HTML・CSSといったコーディングの知識があれば、多機能なホームページを簡単に作成することができるので、個人ブログから企業のコーポレートサイトまで、世界中で幅広く利用されています。

WordPressを利用することのメリットは、本体が無料でありながら、プロが利用できるほどの拡張性や自由度が高いことが挙げられます。個人での利用でも、無料で提供されているWordPressテーマやプラグインも多くあるため、デザインやコーディングの専門的な知識がなくても、ある程度のwebサイトを作成することが可能です。

WordPressの中身はどうなっている?


Wordpressは以下の4つの構成要素から成っています。

コアシステム

WordPressの本体であって、コアシステムなしではWordPressは機能しません。例えばget_header関数などもコアシステムに定義されています。

データベース

固定ページの内容や、投稿記事の内容、ユーザー情報などデータの管理をしています。MySQLという管理システムを使用しています。

テンプレート

テンプレートを元に各ページが動的に生成されます。一般的にwp-content/themesの中に入っているテーマと呼ばれるファイルたちのことを指し、デフォルトでWordPressをインストールするとtwentysixteenやtwentyfifteenなどWordPress側で開発されたテーマが付属でついています。


コーディングやphpが理解できるのであれば、オリジナルでテーマを作成することもできます。コーディングやphpの知識がないのであれば、無料で配布されているテーマも多々あるので、自分のお好みに合わせたテーマを選ぶのがおすすめです。

プラグイン


WordPressの機能を拡張するものです。WordPressには様々なWordPressプラグインが開発されており、メールフォームのプラグインや、SEO対策を施しやすくしてくれるもの、投稿の種類を増やしてくれるものなど、手軽に実装できるものもたくさんあります。

Apache・PHP・MySQLはどのように関係しているか?


大まかな構成がわかったところで、WordPressが動く仕組みを簡単に理解しましょう。

webサイトを表示するには、ブラウザとサーバーとの間で様々なやり取りが生じています。サーバーの中ではしっかりと役割分担ができており、WordPressのようなWebアプリケーションの場合には、Webサーバ、アプリケーションサーバ、データベースサーバというものが関係しています。

WebサーバソフトウェアのApachと、アプリケーションサーバでプログラムの実行をしているPHP、データベースサーバでデーデータ管理をするMySQLがそれぞれ動作することでWordPressが機能するのです。

WordPressで作られたホームページが表示される仕組み

  1. ブラウザでURLを打ち込むとサーバにリクエストが送信される。
  2. Webサーバ上のソフトウェア、Apacheがリクエストされたファイルを探す。
  3. phpファイルが指定された場合にはアプリケーションサーバでPHPが動き、プログラムが実行される。
  4. 実行されたプログラムがデータベースへのアクセスを要求することで、データベースサーバのMySQLに渡り、データの読み込みや保存が行われる。
  5. アプリケーションサーバでの処理が終わると、HTMLファイルなどが作成され、Webサーバに戻される。
  6. Webサーバからブラウザへリクエストの結果が返り、ブラウザがHTML、CSS、JSファイルなどを読み込んでホームページが表示される。

ほんの数秒間に上記の動作が実行されてブラウザ上にwebサイトが表示されているのです。

テーマの中身を理解しよう


掘り下げていくとかなりボリュームが大きくなってしまうので、初心者向けに簡単に説明したいと思います。WordPressが動作するために、テーマ内で必要なファイルは以下の通りです。

  • index.php :トップページ
  • style.css :css
  • function.php :テーマ関数ファイル。知識がないうちは触らないほうがベター。
  • archive.php :アーカイブページ
  • category.php :カテゴリーページ
  • use-wordpre

  • single.php :記事ページ
  • header.php :ヘッダー
  • footer.php :フッター

他にも、検索結果を表示するsearch.phpやphpでトップページを作成する場合はhome.phpを使うなど、必要に応じてファイルは増えていきます。自社のサイトで少し修正を加えたい場合に、今まで管理画面を見てどこを触ればいいのかわからなかった人も、テーマ内のファイルの役割を知っておくことで、修正を加えることができるかもしれません。

テーマ内ファイルの編集方法

直接ファイルが触れるのであれば、wp-content/theme/の中から該当のファイルを編集できます。また、テーマ内のファイルは管理画面からも見ることができ、管理画面>外観>テーマの編集の画面でそれぞれのファイルの中身を変えることも可能です。最新のWordPressでは管理画面でのソースコードも綺麗に記述できるように改善されたので、以前と比べてだいぶ使いやすくなっています。

ただ、あまりphpやコーディングの知識がない方はテンプレートファイルは触らず、制作会社に聞いた方がいいでしょう。少しの記述ミスでサイトが表示できなくなることも多々あるので、どうしても触る場合には必ずバックアップを取るように意識しましょう。

テンプレートファイルの読み込み順

テーマ内のテンプレートファイルですが、読み込みの優先順位があります。簡単に言うと、category.phpがない場合はarchive.php、archive.phpもない場合はindex.phpを読み込む、といったものです。読み込みの優先順位も知っておくと、ホームページ作成にとても役立ちます。

実践用!WordPressテンプレートタグ


WordPressにはテンプレートタグといって、何かを実行あるいは取得するように指示するものがあります。テンプレートタグはテンプレートファイルの中に記述して、情報の取得や実行を行います。

php bloginfo()– ブログに関するさまざまな情報を出力

()内に引数を記述すると処理されます。

記事のループ内で使用できるテンプレートタグいろいろ

テンプレートタグ読み込み

応用してよく使うものまとめました

他にもいろいろと組み合わせて読み込みができます。Webサイト制作の際によく使うものをいくつか。

特定カテゴリー(blog)の記事を数件(10件)表示

特定カテゴリー(blog)の記事を数件(10件)表示 (カテゴリIDを使用)

ちなみに、カテゴリーIDは管理画面のメニュー>投稿>カテゴリーの画面でそれぞれのカテゴリーをマウスオーバーするとステータスバーにURLが表示され、表示された中のcategory&tag_ID=のあとに続く数字がIDとなります。

条件分岐(トップページなら・・・)

条件分岐タグとは、特定のページにだけ特定内容を表示させたいときに使用します。条件分岐を応用すると、パンくずをトップページには表示せず、下層のみに表示することやメインビジュアルのスライドをトップだけに表示するなどといったことから、カテゴリー別にサイドバーの表示を変えたりすることも可能です。実際の記述方法は以下を参考にどうぞ。

条件分岐(特定カテゴリーに属する投稿に特別な条件を設定)

他にも、表示する記事があるかどうかを判定したり、アイキャッチが設定されているかどうかの判定、スラッグから条件分岐を行うなど、便利なものがあるのでサイト制作の際はおさえておきたいですね。

まとめ

WordPress(ワードプレス)をうことで、webサイト制作が手軽で簡単になるというメリットのほか、運用がしやすく、投稿ページがあるためWordPress初心者でもコンテンツを追加することができるので、継続的に行うSEO対策にも有効的です。

このエントリーをはてなブックマークに追加

筆者

M.Nakayama

Bigmac inc. 制作部所属。 前職でBigmacと出会い、2015年6月制作部の立ち上げと共に入社。オンとオフの切り替えをしっかりすることをモットーに、仕事の日はがっつり仕事、休みの日は子どもと目一杯遊び、家事に励むようにしています。 Webデザインからサイト構築まで幅広く携わっていますが、基本的には人が作った綺麗なデザインを寸法の狂いなくコーディングしていくことが好きで、難しいものができたときほど達成感・やりがいを感じます。シンプルでフラットなデザインが好物です。

筆者が最近執筆した記事