WordPress勉強会

WordPressとは？

WordPressは「CMS（Contents Management System）」の一種です。
CMSを導入することで、Web制作の知識がない人でも、HTML・CSSを編集せず管理画面からWebサイトの更新ができます。

CMSの中でもWordPressは世界的に人気で、企業サイトから個人のブログサイトまで幅広く使われています。

XAMPPにWordPressをインストールする

WordPressをインストールするには、PHPとデータベースが使える環境が必要です。
今回はXAMPPにWordPressをインストールしていきます。

WordPressをダウンロード

WordPressの公式サイトにアクセスして、WordPressのシステムファイル一式をダウンロードします。

→ WordPress.org 日本語

info 「WordPress」で検索すると、「WordPress.com」と「WordPress.org」が出てきます。ここでのWordPressは「WordPress.org」のほうを指します。

htdocsに設置

解凍したファイルをhtdocsに設置します。

データベースを用意

PHPMyAdminにアクセスし、データベースを用意しておきます。

インストール実行

ブラウザでアクセスし、画面に従ってインストールを実行します。

管理画面を見てみよう

ログイン画面
管理画面

ポートフォリオサイトを作ろう（準備編）

今回はポートフォリオ（作品集）を題材とした、シングルページのWebサイトをWordPressで作っていきます。

→ 完成形を表示
→ 素材ダウンロード

オリジナルテーマの作成場所を用意

自分でデザインしたWebサイトにWordPressを導入するときは、オリジナルの「テーマ」を作ることになります。

また、テーマフォルダ内に作るファイルのことを「テンプレート」と呼びます。
テンプレートファイルはその役割ごとにファイル名が決められているので、どのファイルを作れば良いか迷ったときは公式ドキュメントの「テンプレート階層」のページを参考にしましょう。

→ テンプレート階層

テーマに必要なファイルを準備しよう

テーマ用のファイルは、 wp-content/themes/ 内に作成します。

フォルダ「portfolio」を作成し、下記の2ファイルを用意します。この2つがないとテーマとして機能しません。

  • index.php
  • style.css

style.css は、テーマの設定ファイルにもなります。
CSSコメントによって、管理画面【外観＞テーマ】に様々な情報を表示させられます。下記は設定内容の一例です。

/* 
  Theme Name: マイポートフォリオ
  Description: {$説明文}  
  Author: {$作者}  
  Version: {$バージョン}
*/

→ テーマの作成

以上の準備をすることで、管理画面【外観＞テーマ】にテーマが表示されているはずです。
有効化して、 index.php が表示されることを確認しましょう。

配布したHTMLを一旦そのまま表示させよう

今回はシングルページ（=トップページのみ）のサイトを作るので、テンプレートファイル front-page.php にコーディングをしていきます。

まずはとりあえず、配布したソースコードをそのままテーマとして表示してみましょう。
HTMLとCSSをそれぞれ対応するテンプレートファイルにコピペします。

  • 配布の index.html → テーマの front-page.php
  • 配布の style.css → テーマの style.css

これだけではまだ正常には表示されません。テンプレートファイルを編集していきます。

テーマに必須のテンプレートタグを追加する

テーマには次の3つのテンプレートタグが必要です。忘れがちなので最初に書くクセをつけておきましょう。

①head閉じタグ（</head>）の直前に次のテンプレートタグを追加。

<?php wp_head(); ?>
</head>

②body開きタグ（<body>）の直後に次のテンプレートタグを追加。

<body>
<?php wp_body_open(); ?>

③body閉じタグ（</body>）の直前に次のテンプレートタグを追加。

<?php wp_footer(); ?>
</body>
emoji_objects WordPressはPHP製のCMSです。テンプレートファイル上ではPHPが動作しますが、PHP以外にもWordPressの機能を使うための専用のコード「テンプレートタグ」というものがあります。

functions.phpを使ってテーマのstyle.cssを読み込む

テーマのstyle.cssは<link>タグで読み込むのではなく、functions.phpを使って読み込む方法が推奨されています。

add_action( 'wp_enqueue_scripts', function(){ 
  wp_enqueue_style('style', get_stylesheet_directory_uri().'/style.css'); 
});
emoji_objects 管理画面の設定変更や、テーマ内で使う関数のカスタマイズはfunctions.phpで行います。

テンプレートファイル上で画像を読み込む

上記で出てきたget_stylesheet_directory_uri()という関数は、テーマフォルダ内に配置した画像をテンプレートファイル上で読み込みたい場合にも使えます。

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/twitter.svg" alt="">

「制作実績」を作ろう

「制作実績」を管理画面から登録できるようにカスタマイズしていきます。

管理画面に「制作実績」メニューを作る

管理画面に「制作実績」投稿用のメニューを増やします。
このように、デフォルトの「投稿」「固定ページ」とは別の種類のコンテンツを管理するための機能を「カスタム投稿タイプ」と呼びます。

add_action('init', function(){ 
  register_post_type('work', [ 
    'label' => '制作実績', 
    'public' => true, 
    'menu_position' => 5, 
  ]);
});

→ 関数リファレンス：register_post_type()

プラグインを使って投稿の編集画面をカスタマイズする

WordPressでは、世界中の開発者が「プラグイン」を配布しています。
プラグインをインストールするだけで複雑なカスタマイズを簡単に適用できたり、お問い合わせフォームやショッピングカートなどの追加機能を実装したりすることができます。

今回はプラグイン「Advanced Custom Fields」を使い、制作実績の編集画面をカスタマイズしていきます。

→ Advanced Custom Fields 公式ドキュメント（英語）

プラグインのインストール方法

管理画面【プラグイン＞新規追加】から、下記のどちらかの方法でインストールできます。

  • 検索結果の中から「今すぐインストール」を選択
  • 「プラグインのアップロード」を選び、プラグインの公式サイト等からあらかじめダウンロードしたzipファイルをアップロードしてインストール

インストールしたプラグインは、【プラグイン＞インストール済みプラグイン】から「有効化」できます。

カテゴリー登録機能をつける

デフォルトの「投稿」についているカテゴリーやタグのような分類機能を、制作実績にも作ってみます。この機能を「カスタムタクソノミー」と呼びます（タクソノミー=分類）。

add_action('init', function(){
  register_taxonomy('workcategory', 'work', [ 
    'label' => 'カテゴリー', 
    'hierarchical' => true, 
  ]);
});

→ 関数リファレンス：register_taxonomy()

keyboard ここまでできたら、「制作実績」を2～3件登録しておきましょう。
次の章から、管理画面で登録した内容をテンプレートファイルに表示させます。

登録した制作実績を表示させる

基本のループの書き方は次のとおりです。

//投稿の取得
$queryarg = [
  'post_type' => 'work',  //投稿タイプ
  'posts_per_page' => -1, //件数
];
$query = new WP_Query($queryarg);

//投稿の有無をチェック
if($query->have_posts()):
  //取得した投稿の分だけループする
  while($query->have_posts()): $query->the_post();
    //この中で内容を出力（例：タイトル）
    the_title();
  endwhile;
  wp_reset_postdata();
endif;

上記はすべてPHPのコードですが、WordPressのテーマ開発は「HTMLの中にPHPを組み込む」ような形で進めていくのが一般的です。
タイトルを<h3>で表示させる場合、whileを開いたら一度PHPを終了して、HTMLのh3を書いて、タイトルを表示するためにPHPを開始して…という書き方になります。

<?php
while($query->have_posts()): $query->the_post();
?>
<h3><?php the_title(); ?></h3>
<?php
endwhile;
?>

while(){...}とwhile(): ... endwhile;

PHPのwhile文は、中括弧を使う書き方「while(){...}」と、セミコロンで開いてwhileで閉じる書き方「while(): ... endwhile;」があります。
※if文も同様です。

各要素の出力例

//タイトル
the_title();

//カスタムタクソノミーで設定したカテゴリ名
//※1投稿に1つだけカテゴリが必ず設定されていることを想定した、必要最小限のコード
$terms = wp_get_post_terms($post->ID, 'workcategory');
echo $terms[0]->name;

//カスタムフィールド(Advanced Custom Fields)の値
//値の有無で条件分岐させたいときは if(get_field('フィールド名')){}
the_field('フィールド名');

お問い合わせフォームを設置しよう

プラグイン「Contact Form 7」を使って、お問い合わせフォームを設置してみましょう。

→ Contact Form 7 公式ドキュメント

Contact Form 7では、フォームの設定を作ると「ショートコード」が生成されます。
テンプレートファイルに表示させるときはこのショートコードを使用します。

echo do_shortcode('ショートコード');

ヘッダー・フッターを完成させる

サイトロゴを設定する

ヘッダーのロゴ画像を管理画面で登録できるようにします。

WordPressには「カスタムロゴ」という機能が標準で備わっています。デフォルトでは非表示になっているため、functions.phpで有効化します。

add_action('after_setup_theme', function(){ 
  add_theme_support('custom-logo'); 
});

【外観＞カスタマイズ】の「サイト基本情報」にて、ロゴ画像が設定できるようになりました。

これで画像のアップロードができますが、SVGをアップロードすると「このファイルタイプをアップロードする権限がありません。」というエラーが表示されます。
ロゴに限らず、SVGを使いたい場合はfunctions.phpに次の記述を追加します。

add_filter('upload_mimes', function($mimes){ 
  $mimes['svg'] = 'image/svg+xml'; 
  return $mimes; 
});

設定したロゴ画像は、次のテンプレートタグで出力できます。

the_custom_logo();

グローバルナビゲーションを設定する

ヘッダーのナビゲーションを管理画面で登録できるようにします。

カスタムロゴと同様「メニュー」という機能が標準で備わっているので、まずはこれを有効化します。

add_action('after_setup_theme', function(){ 
  add_theme_support('menus');
});

【外観＞メニュー】にて、メニューを登録できるようになりました。
登録したメニューは、次のテンプレートタグで出力できます。

wp_nav_menu();

※メニューを複数登録する場合はもう少し複雑なコードになります。

SNSリンクを設定する

フッターのSNSリンクを管理画面で登録できるようにします。

これは色々な実装方法が考えられますが、今回は次の使っていない「固定ページ」内に設定用のページを作り、カスタムフィールドでURLの入力欄を設けます。

この場合、テンプレートファイルに表示させるときは get_field() や the_field() の第二引数に、固定ページのIDを指定する必要があります。

//固定ページのIDが10の場合
the_field('フィールド名','post_10');

おまけ：ヘッダー・フッターを外部ファイル化する

通常、WordPressのテーマ開発では、トップページ・一覧ページ・詳細ページ…など役割ごとに複数のテンプレートファイルを作ります。
そのため、ヘッダーやフッターなど全てのページで共通して使われる要素は、外部ファイル化して読み込むのが一般的です。

今回はシングルページのため特に外部ファイル化するメリットはありませんが、一般的なファイル構成として知っておくとよいでしょう。

//header.phpの読み込み
get_header();

//footer.phpの読み込み
get_footer();

//sidebar.phpの読み込み
get_sidebar();

//その他、任意の外部ファイルの読み込み（例：abc.php）
//get_abc();では表示できないので注意
get_template_part('abc');