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

デザイン部
2019年2月10日

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

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

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

functions.phpは怖くない!

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

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

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

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

などなど。

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

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

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

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

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

アイキャッチを出力する

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

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

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

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

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

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

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

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

スラッグを自動生成する

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

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

以上です(笑)

ちょっと解説

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

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

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

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

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

惜しいですね…

5000になりたかった…。

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

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

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

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

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

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

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

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

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

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

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

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

これで、メニューのいらないclassは削除され、現在のページにのみ、『current-menu-item』というclassが付与されるようになります。

コードもスッキリです。

まとめ

いかがでしたでしょうか?
今回はWordPressのThemeを作成する際のちょっとしたカスタマイズをご紹介いたしました。

こちらのコードは十分に確認してご紹介しておりますが、WordPressのバージョンによっては動作に支障を来すことがあるかもしれません。

ご利用になられる際は、いったんfunctions.phpを保存してから、コードを貼付、不具合が発生した場合は貼り付けたコードを削除してください。

では、今後もどんどんカスタマイズ方法をご紹介していきたいと思います。
次回をお楽しみに。