カスタム3兄弟(投稿/タクソノミー/フィールド)

WordPressのカスタマイズは、まずは投稿・フィールド・タクソノミーの改良から始めてみるのがお勧めです。

[

カスタム投稿

カスタムフィールド

カスタムタクソノミー

プラグイン無しでも可能ですし、コードが短いですのでこちらでも十分です。

実際に使う際は、1行目の「area」、3行目の「地域名」の2か所を書き換えて使ってください。編集する箇所はこの2か所のみです。

「area」の方はタクソノミーのURL末尾に付くIDなので、半角英数字で設定してください。「地域名」の方は管理画面に表示される名前ですので、日本語でも大丈夫です。

5行目に「’hierarchical’ => true」と書いてますが、これを書いておくことで投稿画面ではチェックボックスになります。個人的にはこれが使いやすいと感じてますが、キーワード数が多い場合は消してしまっても良いかもしれません。

register_taxonomy('area', 'post', array(
  'labels' => array(
    'name' => '地域名'
  ),
  'hierarchical' => true
));

表示する際はこちらで。

ContactForm7で自動返信メールを設定する

WordPressでは、お問い合わせフォームからのメールに自動返信を行う様設定することもできます。
ContactForm7での自動返信メール設定は下記Linkが詳しいところです。

XAMPPのローカル環境からでもメール送信が「絶対不可」ではありません。とはいえ、自分自身が所有するメールアドレス・パスワードと、正常に起動するSMTPサーバーが必要です。また、設定ファイルを編集することになりますので、慎重を期してください。

WordPressサイトの管理に便利なプラグイン

WordPressサイトの管理に便利なプラグインを紹介します。

Intuitive Custom Post Order

基本的にWPの投稿記事は新しい順に出力されます。デフォルトでは順番を変えたいのであれば投稿日時を変更して対応するしかありませんが、プラグインを利用すると可能です。

TinyMCE Advanced

htmlのコードをサラリと書ける人であれば必要がないかもしれませんが、ビジュアルエディタに機能を追加できます。WordPressエディタ上ではEnterで改行となりますが、要素の閉じ・開始を伴うものか判別できないため、「ブロックを表示」で確認するのが便利です。

Add Quick Tag

記事を装飾しながら作るならhtmlのタグを打ち込まなくてはなりません。少しでも便利になるように、よく使うものは登録して簡単に呼び出せるようにしたい。そんな願いをかなえてくれるのが「Add Quick tag」。

Regenerate Thumbnails

サムネイルのサイズを後から変更しても記事と紐づけられたアイキャッチ画像のサイズはアップロード時点のものなので、当然ながら反映されません。アイキャッチ画像のサイズを変更しようと思ったら、1記事1記事のアイキャッチ画像を削除 → アイキャッチ画像を設定 → 変更を保存という流れで全記事を修正する必要があります。これを一括で行うプラグインです。

Webページのフォームのデザイン

Webページにinput等のフォーム部品を設置した際、:focus擬似クラスでスタイルを設定しなくても、ブラウザのデフォルトCSSでフォーカス時のスタイルが設定されています。
ChromeやFirefoxでは、デフォルトCSSで青い縁取りが出てハイライトされる設定になっています。
こちらは、borderかと思いきやoutlineというプロパティで設定されています。
スタイリングする際は、ブラウザのユーザーエージェントスタイルをリセットすることから始めます。

WordPress上でjQuaryプラグインを実装してみよう!

WordPressサイトにもjQuaryを適用することができます。今回はbxsliderを例にjQuaryプラグインを実装してみましょう。

bxslider

サンプルデータとしてテキスト8-C1を使用しています。

まずは、テキスト8-C1のfunctions.php最終行にjQuery本体とjQueryのCSSを仕込みます。

function my_scripts_method() {
	wp_enqueue_script('bxslider', 'https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js', array('jquery'), false, true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

function bxslider_css() {
	wp_enqueue_style( 'bxslidercss', 'https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css', array(), null, 'all');
}
add_action( 'wp_enqueue_scripts', 'bxslider_css');

wp_enqueue_scriptsを使用することで、WrodPressがスクリプトを重複なく適切に配置できるようになります。このスクリプトより前に読み込まれる必要があるものとして、今回はarray(‘jquery’)を指定しています。

続けて、jQueryのコード記入です。テキスト8-C1のheader.phpの<?php wp_head();?>の後に以下の通り。

<?php wp_head();?> <!-- wp_head();より下にjQueryのコード入力 -->
<script>
jQuery(function() { //「$」をjQueryに変更
  jQuery('.bxslider').bxSlider({
    auto: true, //スライド自動
    slideWidth: 980, //スライド幅980px
  });
});
</script>

つまづきのポイントとなる、「$」をjQueryに変更することを忘れないでください。

こちらも同じくテキスト8-C1のfront-page.phpにスライド対象となる要素を記述します。<?php wp_header();?>で、グローバルナビまでの記述は取得できているので、その下にbxsliderを配置します。

<?php get_header();?>
  <ul class="bxslider">
   <!-- imagesフォルダを新規作成し画像格納したものを読み込み -->
    <li><img src="<?php echo get_template_directory_uri().'/images/img1.png'; ?>" /></li>
    <li><img src="<?php echo get_template_directory_uri().'/images/img2.png'; ?>" /></li>
    <li><img src="<?php echo get_template_directory_uri().'/images/img3.png'; ?>" /></li>
  </ul>

アクションフック

wp_enqueue_scriptsですが、ここで記述された内容はwp_headに関連付けされており、いわゆるアクションフックとしてWordPress本体にて用意されています(話はややこしくなりますが、wp_headの振る舞いはthemesディレクトリよりも上位のwp-includes/default-filters.phpにて記述されています)。

add_action('wp_head', 'wp_enqueue_scripts', 1);