WordPressの基本①

概要

WordPress基本事項や、ディレクトリ配置、役割等をまとめました。

テスト環境の構築

ローカル・サーバ

• ローカルで開発

  • ローカルで開発の方が、アップロードが不要な為効率が高い。
  • メール送信、ソーシャルとの連携が難しい

• サーバで開発

  • サーバで管理する場合はbasic認証・IPによるアクセス制限を行わなければ見られてします。

テスト環境と本番環境の違い

• データベースに保存されたサイトのURLを書き換え。
• WordPressをインストールするURL

WordPress設定ファイル

wp-config.php

データベース関連の設定を行う。
非常に機密性の高いファイル。

• wp-config.sample.phpはきれいに残しておく。

その他注意事項

• WordPressは最新版を使う。

  • セキュリティに関するアップデートがある為。

• テーマやプラグインの選び方には気をつける

  • 2年以上更新されていないものなどは注意

• コメントのスパムプラグイン

  • Akismetは有効にしておく。
    • 有効にするにはAPIキーが必要。

管理画面を守る

SSL対応したり、IPアドレスでアクセス制限を行いうなどの方法で管理画面を守る。

テーマ

デザインの着せ替え

• テーマを変える事で、コンテンツの内容はそのままにデザインだけを一瞬で変更可能。

テーマのパス

• wp-content/themes

themesディレクトリの中身

• PHPファイル
• CSSファイル
• JSファイル
• 画像ファイル
• 翻訳ファイル(pot)
• Webフォントファイル

ページを表示する為のテンプレートファイル

index.php

• メインテンプレート。
• テーマの必須ファイル。
• 全てのページ用のテンプレート。

page.php

• 固定ページ。

single.php

• 個別投稿ページ。

archive.php

• アーカイブページ。

image.php

• 画像表示。
• 画像挿入時に「添付ファイルのページ」を選択した画像。

search.php

• 検索結果。

404.php

• 404ページ。

モジュールテンプレートファイル

• Webサイトで用いられる、「ヘッダー」「フッター」などの各ページで共通で表示される部分。
• モジュールテンプレートとして、「ページを表示する為のテンプレートファイル」に読み込まれる。

サイト内で共通のパーツを表示されるモジュールテンプレートファイル

header.php

• 共通ヘッダーを表示。

footer.php

• 共通フッターを表示。
• カスタムメニューの「フッターメインメニュー」と「フッターソーシャルリンクメニュー」を表示(設定されている時のみ)

sidebar.php

• 右サイドバー。
• ウィジェットのサイドバー1を表示。

sidebar-content-bottom.php

• 固定ページと個別投稿ページのコンテンツの下に、ウィジェットのサイドバー2とサイドバー3を表示。

comments.php

• コメントリスト、コメント投稿フォームを表示。

searchform.php

• 検索窓を表示

コンテンツを表示するモジュールテンプレートファイル

template-parts/content.php

• コンテンツ表示のデフォルトテンプレート。
• index.phpやarchive.phpで使われる。

template-parts/content-page.php

• 固定ページのコンテンツを表示。

template-parts/content-none.php

• 投稿がない場合。

template-parts/content-single.php

• 個別投稿ページのコンテンツを表示。

template-parts/content-search.php

• 検索結果のコンテンツを表示。

template-parts/biography.php

• 投稿の作成者のプロフィールを表示。
• content-single.phpで使われる。

テーマに独自の機能を追加する為のPHPファイル

function.phpとincディレクトリ以下に機能追加用のファイルが格納されている。

function.php

• 基本機能追加用ファイル。
• プラグインとして追加する場合はWordPress全体に反映されるが、function.phpによって追加された機能はそのテーマのみで有効。

inc/back-compat.php

• 以前のWordPressのバージョンへの対応を記述。

inc/customizer.php

• テーマカスタマイザーを定義。

inc/template-tags.php

• 独自のテンプレートタグを定義。

CSSファイル

• style.css
  • デフォルトのスタイルシート。
  • テーマの必須ファイル。
• rtl.css
  • 右から左へ書く言語用のスタイルシート。
• css/editor-style.css
  • 投稿エディタにスタイルを適用。
• css/ie.css
  • IE用のCSSを記述。
• css/ie8.css
  • IE8用のCSSを記述。
• css/ie7.css
  • IE7用のCSSを記述。

screenshot.png

管理画面の[外観]->[テーマ]で表示される画像。

その他ディレクトリ

• genericons
  • テーマで使用されるアイコンフォント。
• languages
  • 翻訳ファイル。
• js
  • JSファイル。

テンプレート階層

• 「ページを表示する為のテンプレート」は「テンプレート階層」というルールに従って各ページを表示する際に適用される。
  • このルールのおかげで、特に使用するテンプレートを指定しなくても適切な表示ができる。

テンプレート階層のポイント

• 各ページで優先されるテンプレートファイルの種類が異なる
• 必ずしも、優先度の高いファイルを用意する必要はない
• index.phpが全てのページで利用できる

テンプレート階層を利用した効率的なテーマ開発

index.phpのみでテーマを作ることも可能。
ただし、ページの種別ごとにレイアウトや表示内容を異なるものにしたい時、1つのファイル内に複雑な条件分岐を書かなくてはいけなくなる。
(コードの視認性・メンテナンス性が悪い)

ただし、細かくしすぎるのもだめ。
コンテンツが違うだけで、同じデザインなら共通のテンプレートを使うべき。

個別のテンプレートファイルを用意すべきか、共通テンプレートファイルで表示できるかを判断してテーマ設計を行うことが重要。

スラッグ

個別投稿ページや固定ページの識別名で、主にURLの一部として使われる。
スラッグは管理画面で修正可能。

オリジナルテーマを作成する方法

大きく分けて2つの方法がある。
クライアントのニーズ(時間や費用面)に答える形で検討しなくてはいけない。

既存のテーマをベースにカスタマイズ

メリット

• 既に完成しているテーマをベースにする為、工数が削減できる。
• 工数が少ないが、完成度が高いものができる。

デメリット

• サイトの目的にあったテーマ選びが重要である。
• カスタマイズが難しいテーマが存在する。

ゼロから作成する

メリット

• デザイン・機能など細かいところまで自由にコントロール可能。

デメリット

• 制作に時間が掛かる。
• HTML/CSS/PHPの総合的な知識が必要になる。

ゼロからテーマを作成する方法

「サイト設計・デザイン -> HTML+CSSのコーディング-> WordPressテーマ化」

の流れ。

① サイト設計・デザイン

• 最初に行う工程。
• この段階で、必要な機能をどのように組み込んでいくかをしっかりと決めておく。
• 必要となりそうなプラグインの選定・簡単なテストも行なっておく。

② HTML + CSSのコーディング

• WordPressが自動的に出力するidやclass、エディタから入力した時に必要になるid, classもこの段階できちんと定義する。

③ WordPressテーマ化

• HTML + CSSを元に、共通部分の切り分けをし、WordPressのテンプレートタグに置き換えを行い、テンプレートファイルを作成する。
• 必要であればfunction.phpやプラグイン機能を追加する。

テーマ作成の基本作業

① wp-content/themesにディレクトリを作成

• themesに新規ディレクトリを追加しする。
• ディレクトリ名は任意。

② テーマディレクトリにstyle.cssを作成し、テーマ情報を記述

• style.cssは必須ファイル。
• コメントでWordPressテーマと認識させる内容を書く。

③テンプレートファイルなどを作成

• index.phpは必須。
• screenshot.pngを用意。
• その他テンプレートファイルはサイトの目的に応じて作成する。

親テーマと子テーマ

「既存のテーマをベースにカスタマイズする方法」と「ゼロから作成する方法」両方で利用可能。特に「既存」で作成する場合に役に立つ。

子テーマとは

• あるテーマをベースとなる親テーマと指定し、そのデザインや機能を引き継ぐことができる仕組みの事。
• 親テーマの構造や機能を継承しつつ、子テーマ独自にデザインを変更したり、機能追加が可能。

テーマはアップデートで上書きされる

• 既存テーマをベースにカスタマイズする際に注意しなければいけないのが、「テーマはアップデートで上書きされる」こと
• 既存テーマのファイルを直接カスタマイズしていると、既存テーマのアップデートの際に、変更点が全て上書きされる。
• 既存テーマを利用する際は、子テーマを使う事が推奨されている。

子テーマの作り方

① wp-content/themesにディレクトリを作成。

② style.cssを作成。

• style.cssで子テーマ名と親テーマのディレクトリ名を指定する。

子テーマ注意点

• WordPressは、子テーマに適合するテンプレートファイルがない場合、親テーマのテンプレートファイルを適用するルール。
• 子テーマには必ずしもindex.phpは必要ない。
• 子テーマのほとんどは、親テーマのCSSは参照しない。
• CSSに変更を加えたい場合は、子テーマに親テーマのCSSを読み込み、上書きする。
  • CSSの読み込みは、functions.phpにスタイルシート読み込みを記載するのが、最近の主流。
  • @importによるCSSの上書きは、スタイルシートの読み込みの順番で上書きできないことがある。
• テンプレートファイルの内容を変更する場合は、変更を加えたいファイルを子テーマのディレクトリにコピーして修正する。
  • 子テーマが優先される。

WordPressサイト設計図

サイト設計

• サイトマップの作成
• ワイヤーフレーム(モック)の作成
• 各種仕様書
• テーマの設計
  • どのようなテンプレートファイルが必要か検討

更新されるページと更新されないページの切り分け

更新されるページ

• お知らせ・ブログ・ニュースの様なコンテンツは比較的頻繁に更新される。
• 時系列に沿ってコンテンツが積み重なっている。
• 「そのページがいつ公開されたか」という「時間」が重視される。

更新されないページ

• 会社情報の様なコンテンツ。
• 一度作ったらあまり頻繁に更新されない。
• 時系列ではなく、階層構造によって分類される。

WordPressの投稿タイプ

WordPressでは、色々なタイプのコンテンツを保存したり、表示できる。
その分類を「投稿タイプ」と呼ぶ。

固定ページ(page)

管理画面の固定ページで管理。

投稿(post)

管理画面の投稿で管理。

添付ファイル(attachment)

管理画面のメディアで管理。

リビジョン(revision)

変更履歴。

ナビゲーションメニュー(navigation menu)

管理画面の[外観]->[メニュー]で管理。

カスタム投稿タイプ(Custom Post Types)

独自に定義して追加する。

固定ページの特徴

会社情報などの更新頻度が少なく、時系列に沿った表示をする必要のないコンテンツや、階層構造をもたせたいコンテンツに適している。

• 階層構造を持つことができる。
  • 親ページと子ページが存在できる。
• 日付によるアーカイブがない。
• ページ属性により、ページ毎にカスタムテンプレートを選択したり、順序付けすることができる。
• パーマリンクを設定すると、URLはスラッグになる。

投稿の特徴

ブログ記事や、新着情報、お知らせなどの時系列に沿って更新されていくコンテンツは、投稿で作成するのに適している。

• 時系列に沿って表示される。
• 期間別のアーカイブを持つ。
• カテゴリーやタグによる分類ができる。
• 階層構造を持たない。
• ページ属性を持たない。

カテゴリーとタグの違い

• カテゴリーもタグも記事を分類するもの。
• カテゴリーは階層構造を持つ。
• タグは階層構造を持たない。

カスタム投稿タイプの特徴

サイトの構成によっては、固定ページや投稿に分類しきれないコンテンツもでてくる。
その様な時に利用するのが独自に追加することができる「カスタム投稿タイプ」。

• 階層構造を持つ。
• 複数のカスタム分類で分類できる。
• 時系列に沿った表示が可能。
• ページ属性で、順序付け可能。
• 非公開の投稿タイプも作成可能。

固定ページと投稿の特徴を持ち合わせている。
それぞれが違う特徴と名前を持つ複数の投稿タイプを作成可能。

投稿タイプ名は、固定ページは「page」、投稿は「post」となるが、カスタム投稿タイプは20文字以内の任意の名前となる。

読み込むページ、読み込まれるページの関係を掴む

読み込むページ

トップページ

• サイトの概要を伝える。
• 次のページへの導線となるページ。
• 個別投稿ページの情報を読み込んで表示させることが多い。

どの様な情報を読み込ませるかを検討

• リストの場合、何件読み込むか
• 読み込むのはタイトルか、内容か、抜粋か
• 画像も読み込むか、サイズはどうするか
• 日付、カテゴリーなどの付随情報も読み込むか
• トップページのみに表示させる内容が必要か

一覧ページ

一覧ページも読み込む内容を精査します。

読み込まれるページ

• 読み込まれるページでは、「そのページに表示する情報」を制作・更新しやすい様に考えるだけでなく、「他のページに読み込まれる情報」をどの様に引用させるかを考える。
• 非公開のカスタム投稿タイプを用いて個別投稿ページを持たない読み込み専用のページを作ることもできる。

テーマ作成の初期作業

① 必要ページ分のHTMLファイルを作成する。

• WordPressのテンプレートタグやPHPを入れない状態でHTMLを作成する。
• index.html(トップページ)
• style.css(テーマメインのCSS)

② wp/contents/themesにテーマディレクトリを作成する

• ①で作成したHTMLとCSSを配置する。
• index.htmlの名称をindex.phpに変更する。
• style.cssにWordPressテーマ化するコメントを記載する。
• style.cssの読み込みをテンプレートタグに修正する。

index.php

<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet">

③ 共通部分をモジュールテンプレートファイルとして分割する

• header.php
• footer.php
• sidebar.php

index.php

    ...

    <?php get_header(); ?>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-9">
          <h1>Hello from Gemcook!</h1>
        </div>
        <div class="col-sm-3">
          <?php get_sidebar(); ?>
        </div>
      </div>
    </div>

    <?php get_footer(); ?>

    ...

• 引数で個別の共通パーツを呼ぶことも可能。

index.php

// sidbar-blog.phpを呼ぶ場合
<?php get_sidebar('blog'); ?>

その他共通パーツ読み込み関数

get_template_part([slug]);

ヘッダーやフッターなどの予め用意されている以外の共通パーツの読み込みが可能。

index.php

// content.phpを呼ぶ場合
<?php get_template_part('content'); ?>

// content-blog.phpを呼ぶ場合
<?php get_template_part('content', 'blog'); ?>

wp_head()とwp_footer()

header.phpとfooter.phpにそれぞれ、wp_head()とwp_footerの記述を行う。
記述がない場合は、プラグインがうまく動作しない場合などがあるため、注意する。

テンプレートタグとは

PHPで作られたWordPress独自の命令文。

主なテンプレートタグ

一般的なテンプレートタグ

blog_info()

ブログの基本情報を取得して表示する。

the_title()

投稿のタイトルを表示する。

the_content()

投稿の内容を表示する。

the_date()

投稿の日時を取得する。

wp_list_categories()

カテゴリー一覧を表示する。

インクルードタグ

get_header()

header.phpを読み込む。

get_footer()

footer.phpを読み込む。

get_sidebar()

sidebar.phpを読み込む。

get_template_part()

その他のテンプレートを読み込む。
(パラメータ必須)

条件分岐タグ

is_front_page()

サイトのフロントページが表示されている場合。

is_home()

ブログのメインページが表示されている場合。

is_single()

個別投稿ページが表示されている場合。

is_category()

カテゴリーのアーカイブページが表示されている場合。

Codex

WordPressの辞書的存在。
わからないことは、Codexを使って検索する癖をつける。
Codex