【WordPress】ハンバーガーメニューにオリジナルのプロフィールを追加してみた【Cocoon】

先日、こんな感じの会話が近所で行われているのを見かけました。

そこで今回、Wordpressサイト(テーマはCocoon)のハンバーガーメニューにオリジナルの要素を追加する過程について、まとめていきたいと思います。

管理画面では編集できない変更をするには？

以下の画像のように、Cocoonに存在しない要素をハンバーガーメニューの中に追加するにはどうすればいいのでしょうか？

まず、「ハンバーガーメニューの要素について記述しているphpファイルはどこにあるのだろうか？」と思い、Cocoonの子テーマ内を物色してみました。

しかし、ハンバーガーメニューの要素について記載されているphpファイルは見つからず。

そして、「もしかしたら子テーマにではなく親テーマの中にあるのではないか？」と考えて、親テーマ内を見ていくと、tmpディレクトリ内にハンバーガーメニューに関する記述をしているファイルがありました。

それが「mobile-navi-button.phpファイル」です。

親テーマのファイルをいじるとバージョンアップのたびに内容がリセットされる。対策は？

じゃあ、そのmobile-navi-button.phpファイルを編集しちゃっていいのか？

答えはノーです。

親テーマのファイルはWordPressのバージョンアップのたびに内容が更新されて追記分がリセットされます。

なので、基本的には子テーマ側で編集しなければなりません。

とはいえ、今回編集したいファイルは親テーマにあるという状況。

子テーマに新規ディレクトリと新規ファイルを作成

そこで選んだのは「子テーマにも親テーマと同じディレクトリを作って、mobile-navi-button.phpファイルを複製する」という手段です。

冒頭で彼女が言っていた方法でハンバーガーメニューに新しい要素を追加することに。

親テーマ・子テーマは以下のディレクトリです。

親テーマのディレクトリ	cocoon-master
子テーマのディレクトリ	cocoon-child-master

親テーマのtmpディレクトリにあるmobile-navi-button.phpファイルのパスは以下になります。

/wp-content/themes/cocoon-master/tmp/mobile-navi-button.php

このmobile-navi-button.phpファイルをコピーして、子テーマに複製していきます。

子テーマのディレクトリである

/wp-content/themes/cocoon-child-master

にtmpディレクトリを新規作成。

そこに先ほどのmobile-navi-button.phpファイルをペースト。

子テーマでも親テーマと同じmobile-navi-button.phpファイルができました。

これで準備は完了です。

あとは、子テーマのmobile-navi-button.phpファイルに追加したい要素（プロフィールなど）を入れ、その記述に合わせたCSSを同じく子テーマのstyle.cssファイルに追記すれば編集完了となります。

参考書籍

wordpressについてはこちらの書籍で学習しています。

まだまだwordpressについて知らないことが沢山あるので、普段の仕事やブログ執筆だけでなく書籍での学習も並行して進めていけたらいいなぁと思っています。