今回はプラグインの導入についてやっていきます。
前回まででサイトの表示自体は問題なく行えている状態になりました。
今回はプラグインを導入して、各種機能を追加していきましょう。
プラグインとは？
プラグインについてWordPress Codexでは以下のように説明されています。
プラグインは、WordPressの機能を拡張するためのツールです。
WordPress のコアは、柔軟性を保つため、不必要なコードでふくれあがってしまわないように設計されています。ユーザーそれぞれが特定のニーズに合ったプラグインを利用して、カスタム機能を取り入れられるように作られています。
WordPress Codex日本語版より
つまり、WordPressの基本機能はとてもシンプルに作られているから、必要な機能はユーザーがプラグインで拡張してね、という訳です。
例えば、「SEO対策のプラグイン」や、「お問合せフォームの設置」など様々な機能をプラグインで追加していく事ができます。
様々な機能を追加するプラグインとその使い方を紹介していきます。
パンくずリストを設置する（Breadcrumb NavXT）
パンくずリストとはユーザーがサイト内でどこにいるかを示すリストのようなものです。
これを設置することで、サイトの使いやすさの向上のみならず、SEOにおいても効果を期待できます。
Breadcrumb NavXTのインストール
まずはプラグインをインストールしましょう。
管理画面左側のツールバーからプラグイン > 新規追加と進んでください。
そうすると、右上にプラグインの検索バーが出るので、「Breadcrumb NavXT」と入力しましょう。
一番上に出てくるので、「今すぐインストール」を押して、インストールが終わると「有効化」ボタンに変わるので押しましょう。
以下の画像の様になれば有効化されています。
有効化まで完了したら、以下のコードをパンくずリストを表示したい場所に貼り付けます。
<?php if ( function_exists( 'bcn_display' ) ) { bcn_display(); } ?>これだけでパンくずリストの設置は完了です。
追加CSSでカスタマイズ
ただデフォルトだと見た目がイマイチなので追加CSSでカスタマイズしてみましょう。
左のメニューバーから外観 > カスタマイズ > 追加CSSと進みます。
下のテキストエリアに直接CSSを書いていくことで見た目をカスタマイズできます。ライブプレビューになっているので、自分が書いたCSSがリアルタイムで適用されるので確認は簡単です。
CSSの記述が終わったら右上の「公開」ボタンを押すことで、CSSが保存されます。
追加CSSが効かないときは、「追加CSS」の問題というよりも、その中に記述したCSSの文法や優先度の問題であることがほとんどです。
他に記述したCSSとの競合がないか確認したり、詳細度を高めるなどして調整してみてください。
お問い合わせフォームを設置する（Contact Form 7）
お問い合わせフォームはプラグインを使うことで簡単に実装できます。
今回はContact Form 7を紹介します。Contact Form 7をおすすめする理由としては、
- 使い方がわかりやすい
- 開発者が日本人のため、日本語の情報が多い
などが挙げられます。
Contact Form 7のインストール
まずは先ほどと同じ様に、管理画面左側のツールバーからプラグイン > 新規追加と進んでください。
検索バーに「Contact Form 7」と入れると、富士山のアイコンのプラグインが出てくるので、インストールして有効化しましょう。
上の画像の様になっていればOKです。
Contact Form 7の設定
Contact Form 7では入力してもらう情報を選択して作成する事ができます。
Contact Form 7が有効化されていると、左のツールバーに「お問い合わせ」という欄が出るので、お問い合わせ > 新規追加 と進みましょう。
すると以下のような画面になります。
まずは一番上の入力欄にフォームの名前をつけましょう。
これはフォームを管理するための名前で、サイトには表示されないので自分の覚えやすい名前をつけましょう。
下のテキストエリアでコードを書いていくことで自分でカスタマイズできます。
今回はWordPress化の手順の中でこのプラグインを使うので、
HTMLとCSSで見た目だけコーディングしたコードは既にある前提で進めていきます。
まずはContact Form 7のテキストエリアに自分でコーディングしたフォーム部分のコードをすべて貼り付けてください。（カット＆ペースト）
この作業は既にコーディングしてあるクラス名などを利用し、CSSの書き直しを不要にするために行いましょう。
僕の場合はこんな感じになりました。
そうしたら、情報を入力する部分のみを、contact form 7の機能で書き換えていきます。
情報を入力する部分とは、<input>タグや<textarea>タグ、送信ボタンなどです。
手順は以下のとおりです。
①置き換えたい部分にカーソルを合わせて、上のメニューから挿入したいタグの種類を選ぶ。
（名前欄だったら「テキスト」、メール欄だった「メールアドレス」のような感じ）
②表示されたウインドウで設定を行う。
✔ 項目タイプ → 「必須項目」にチェックを入れると、入力が必須の項目になります。
✔ 名前 → "your-email"と入力しましょう。違う文字列だとエラーが出ます。
✔ デフォルト値 → デフォルトで入力欄に文字を入れておけます。その下の「プレースホルダーとして利用する」にチェックをいれるとプレースホルダーとして使えます。（薄い文字が背景に表示される。）
✔ ID属性&クラス属性 → 入力欄にID、クラスをつけられます。自分でコーディングした際につけていたクラスやIDを入力するとそのままCSSが利用できます。
③設定が終わったら、一番下の「タグを挿入」ボタンを押してタグを挿入する。
最終的に以下の画像の様にすべて置き換わっていればOKです。
置き換えが終わったら、下の「保存」ボタンを押しましょう。
すると青色のバーでショートコードが表示されるので、それをコピーします。
フォームを設置したいページのテンプレートファイルを編集
今回はフォームを設置するのはENTRYページなのでentry.phpを編集していきます。
entry.php内で関数を利用してショートコードを読み込みます。
<?php echo do_shortcode('〇〇'); ?>という関数を使います。
〇〇の中には先ほどコピーしたショートコードをそのまま貼り付けてください。
サンプルとしてパンくずリストとお問い合わせフォームを設置したentry.phpのコードを掲載します。
<?php /* Template Name:entry */ ?>
<?php get_header();?>
<main>
<section class="page-ttl">
<div class="inner">
<h2><?php single_post_title(); ?></h2>
</div>
</section>
<aside class="site-map">
<div class="inner">
<p>
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</p>
</div>
</aside>
<section class="entry-section">
<div class="inner">
<?php echo do_shortcode('[contact-form-7 404 "Not Found"]'); ?>
</div>
</section>
<?php get_template_part('contact');?>
</main>
<?php get_footer();?>クラス付きでショートコードを設定しておいたおかげで、これだけの記述でデザインはそのままでお問合せフォームを実装できました。
今回の記事で「WordPress化の方法を解説」シリーズはおしまいです。
ありがとうございました。
