WordPressのThemeを自作する方に送る『functions.phpに簡単なコードを追記してWordPressを使いやすいようにカスタマイズしよう講座』

WordPressにバージョン5が登場して、2か月が経とうとしています。
デベロッパーからは最新版のバージョン5系統の利用が推奨されていますが、皆さまは4系統と5系統のどちらをご利用になられているでしょうか？

私は、まだ4系統です…。

それはともかく、無料で提供されカスタマイズが自由なWordPressは世界中で利用され、たくさんの開発者達がよりよいCMSになるよう尽力されています。
今回はそんなWordPressのプラグインを使うほどじゃないけど、ちょっと手を加えたい！！という方に、簡単にできるカスタマイズをご案内いたします。

1 functions.phpは怖くない！
- 1.1 真っ白になった時の対処法
2 アイキャッチをカスタマイズする
3 スラッグを自動生成する
- 3.1 ちょっと解説
4 ナビゲーションメニューのカスタマイズ
5 まとめ

functions.phpは怖くない！

functions.phpは１文字でも記述を間違えると、画面が真っ白になってしまうため、カスタマイズを敬遠される方が多いと思います。

サイトが真っ白になれば、確かに驚きます。
でも、落ち着いてください。

真っ白になった時の対処法

編集作業を戻ってみる。
ショートカットキー『Ctrl+z』（Macの場合は『command+z』）を押して、真っ白になる前まで戻ってみる。
とりあえず、新しく記載した箇所を削除する。
コードの終わりの『;』をきちんと記載したか確認する。（私はよく忘れます…）
半角にすべきところが、全角になっていないか確認する。

などなど。

でも、どうしても真っ白が直らないようなら、functions.phpの中身を消しちゃえば真っ白からは解放されます。
ただし、これはそれまでやったカスタマイズが消えてしまうということです。
functions.phpに記述する際は小まめな保存が1番です。

やりたい事を1つやったら、保存して、確認するクセをつけましょう。

アイキャッチをカスタマイズする

アイキャッチを使えるようにする

まずはアイキャッチが使えるように、アイキャッチの有効化を行いましょう。
functions.phpに下記のコードをコピペしてください。

/* アイキャッチ画像の有効化 */
add_theme_support('post-thumbnails');

1 2	/* アイキャッチ画像の有効化 */ add_theme_support('post-thumbnails');

アイキャッチを出力する

アイキャッチを有効化したら、アイキャッチを表示させたい箇所に下記のコードをコピペしてください。

/* アイキャッチを表示させる */
<?php the_post_thumbnail('thumbnail'); ?>

1 2	/* アイキャッチを表示させる */ <?php the_post_thumbnail('thumbnail'); ?>

これで、アイキャッチが出力されます。

アイキャッチのサイズを変更する

アーカイブページ用にアイキャッチのサイズを変更したい場合や、コーポレートサイトの各ページのサブビジュアル用にサイズを調整したい場合などにこの方法を使うと思い通りのサイズに画像をカットできます。
functions.phpに下記のコードをコピペしてください。

function thumbnail_size() {
  /* アイキャッチ画像の有効化 */
  add_theme_support( 'post-thumbnails' );
  /* 解説 
  add_image_size( 'アイキャッチ画像の名前', 横幅, 高さ, 切り抜きをするかどうか[true]or[false] ); */
  add_image_size( 'archive-img', 150, 150, true );
  add_image_size( 'subvisu-img', 1500, 500, true );
}
add_action( 'after_setup_theme', 'thumbnail_size' );

function thumbnail_size() {

/* アイキャッチ画像の有効化 */

add_theme_support( 'post-thumbnails' );

/* 解説

add_image_size( 'アイキャッチ画像の名前', 横幅, 高さ, 切り抜きをするかどうか[true]or[false] ); */

add_image_size( 'archive-img', 150, 150, true );

add_image_size( 'subvisu-img', 1500, 500, true );

}

add_action( 'after_setup_theme', 'thumbnail_size' );

サイズは複数増やせますので、必要なサイズをご自分で増やしてご利用ください。

オリジナルサイズのアイキャッチを出力する

アイキャッチを出力したい箇所にコピペしてください。

/* 『archive-img』の部分を変更 */
<?php the_post_thumbnail('archive-img'); ?>

1 2	/* 『archive-img』の部分を変更 */ <?php the_post_thumbnail('archive-img'); ?>

『archive-img』の部分を変更することで、オリジナルサイズのアイキャッチが出力できます。

スラッグを自動生成する

WordPressは記事名が自動で記事のアドレスになるため、日本語の文字は日本語のアドレスになります。
Googleのジョン・ミューラー氏は、ページの中身とURLは同じ言語にするほうがいいのではないかといっています…。
SNSなどに投稿する際、日本語のアドレスは『https://isenprint.co.jp/category/%e3%82%a2%e3%82%a4%e3%82%ad%e3%83%a3%e3%83%83%e3%83%81/』というような表示になってしまい、怪しいサイトへ誘導されそうな気持ちになってしまいます。

そのため、現状としてはスラッグを英語や数字にしておくのが無難だと言えます。
方法は簡単です。
functions.phpに下記のコードをコピペしてください。

function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) {
if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) {
$slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;
}
return $slug;
}
add_filter( 'wp_unique_post_slug', 'auto_post_slug', 10, 4 );

function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) {

if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) {

$slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;

}

return $slug;

}

add_filter( 'wp_unique_post_slug', 'auto_post_slug', 10, 4 );

以上です（笑）

ちょっと解説

上記は、もしもスラッグが日本語になっていたら、

$slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;

1	$slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;

これに変更してね。
という内容になっています。

utf8_uri_encodeは文字列のエンコードのための記述ですので、おまじないだと思ってそのまま使ってください。
『$post_type』は投稿タイプになります。
カスタム投稿などを利用している場合は、カスタム投稿名になります。
『$post_ID』はそのまま、投稿IDですね。

この2つを『-』で繋いでいます。

この記事もこの記述でスラッグが変更されていますが『https://isenprint.co.jp/group_blog/group_blog-4999』

惜しいですね…

5000になりたかった…。

この他にもjQueryを使う事で、日付を追加したりもできますが、今回は1番無難な方法をご紹介しました。

ナビゲーションメニューのカスタマイズ

WordPressではナビゲーションが簡単に利用・作成できます。

複数のメニューを登録する方法

下記のコードをfunctions.phpにコピペしてください。

register_nav_menus( array(
  /* '名前（英数字）' => esc_attr('管理画面に表示される名前') */
  'globalnav' => esc_attr('GLOBAL NAV'),
  'footernav' => esc_attr('FOOTER NAV'),
  'menu' => esc_attr('MENU'),
) );

register_nav_menus( array(

/* '名前（英数字）' => esc_attr('管理画面に表示される名前') */

'globalnav' => esc_attr('GLOBAL NAV'),

'footernav' => esc_attr('FOOTER NAV'),

'menu' => esc_attr('MENU'),

) );

メニューはいくつでも作成可能です。

登録したメニューを出力する方法

下記のコードを出力したい箇所にコピペしてください。

<?php
  wp_nav_menu( 
    array(
      'theme_location'=>'globalnav',/*名前（英数字）*/
      'items_wrap' => '<ul>%3$s</ul>',
    )
  );
?>

<?php

wp_nav_menu(

array(

'theme_location'=>'globalnav',/*名前（英数字）*/

'items_wrap' => '<ul>%3$s</ul>',

)

);

これで、リストタイプのメニューが出力されます。

メニューのclassを削除する方法

このままでも十分なのですが、今回はさらにちょっとカスタマイズ。
出力されたコードにはたくさんのclassが付与されており、ごちゃごちゃと見づらい状態になっています。

下記コードをfunctions.phpにコピペしてみてください。

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);

function my_css_attributes_filter($var) {
    return is_array($var) ? array_intersect($var,  array( 'current-menu-item' ) ) : '';
}