WordPress(ワードプレス)を使ってWebサイト制作

記事公開日:2016.06.30

最終更新日:2017.08.31

243 PV

Webサイト制作といえば、最近の主流はWordPressを使うことが多くなっています。弊社のWebサイト制作案件もクライアント様のユーザビリティを考え、WordPressを使っての構築がほとんどです。
今回はそんなWordPressについて仕組みと構築方法を覚書も含め書いていきます。

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

そもそもWordPressって一体なに?という方はこちらをどうぞ。
WordPressとは?

こちらにもメリットはたくさん書かれていますが、個人での利用でしたらテンプレが豊富だったり、簡単にWebサイトが作成できることが最大のメリットではないでしょうか?
これだけ見ているとWordPressを使えば簡単にすぐWebサイトの制作ができる!と思われがちですが、そんなこともありません。
制作となるとWordPressは深いです。つまづくことも多々あり、思い通りにいかないことがほとんど・・・。まずはWordPressを使ってサイトを構築していくにあたり、WordPressがどんな仕組みになっているのか簡単に説明していきたいと思います。

WordPressの中身のお話

WordPressはphpというプログラム言語を使って作られています。個人での利用だと好きなデザインに近いテーマを使うことが多いかと思いますが、Webサイト制作となるとこのテーマを作るところから入ります。テンプレートファイルはwp-content/themesに入っています。WordPressのデフォルトテーマtwentysixteenやtwentyfifteenが入ってるのでそちらを複製してテーマを作成していくのがオーソドックスな方法となります。

さらに、複製したテーマのstyle.cssにテーマの名前やその他の情報を入力。こちらにテーマ名を入れることで、WordPress管理画面>外観>テーマでテーマの選択ができるようになります。ここまで準備が整ったらいよいよ構築に入っていきます。

どうやってオリジナルテーマを作成していくのか?

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

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

他にも、search.phpやphpでトップページを作成する場合はhome.phpなど、必要に応じてファイルは増えていきます。自社のサイトでちょこっと修正を加えたい場合など、今まで管理画面を見てどこを触ればいいのかわからなかった人もこちらを知っておくことで、少しの修正を加えることができるかもしれません。ちなみに、これらのファイルは管理画面からも見ることができ、管理画面>外観>テーマの編集でそれぞれのファイルの中身を変えることも可能です。

ただ、あまりphpや制作の知識がない方はむやみやたらにいじらず、制作会社に聞いた方がいいかもしれません。また、これらのテンプレートファイルですが、読み込みの優先順位があります。簡単に言うと、category.phpがない場合はarchive.php、それもない場合はindex.phpといったものです。こちらも制作においては必要な知識となります。

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

WordPressには表示する内容をカスタマイズするとき、テンプレートタグを修正したり書き加えたりします。何かを表示・取得したいときに使うもので、こちらをいくつか覚えているだけでカスタマイズがかなり簡単になります。

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

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

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

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

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

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

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

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

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

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

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

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

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

最初は呪文のように見えるphpも中身や仕組みがわかってくるととっても便利なものです!WordPressでのWebサイト制作においては必要不可欠な知識となるのでこれから始める方もいろいろと調べながらやっていってみてください。

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

筆者

M.Nakayama

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

筆者が最近執筆した記事