【令和最新版】ラズパイ４にWordpressを手動でインストールにてローカル開発環境を作ったので、 今回はテーマを作っていきます。

テーマ作りは大きく２つに分けることが出来ます。

1つは誰もがダウンロードして使えるような仕組みで管理画面も独自にカスタマイズしているもの。

有料テーマとかに多いやつですね。

一方はその人用に特化したテーマです。

私が作ってきたのは基本的に後者ですね。

記事の投稿は基本的にVSCodeを使ってローカルで記事をマークダウン記法で記述して node.js側でスクリプトを使ってコマンドを打ち込んで投稿して管理画面で微調整する感じです。

なので私が作るテーマって正直Wordpressを使ってるような感覚ってほとんど無い作りになっています。

ブログシステムとして便利なのでWordpressを使ってるにすぎないうわけですね。

ってことで今までは完全自分用のテーマを作ってきたので、 今回は誰でも扱える汎用的なテーマにしていきたいなと思います。

そういえば親子テーマみたいなものも作ったことがなかったので 知識向上のためにも作ってみたくなりました。

なにはともあれ、管理画面をいじる方法を身に着けないといけませんね。

手始めにWordpress管理画面のサイドバーに項目を追加したり、 既存の項目を非表示にしたりしてみましょう。

その前にまずテーマ作りのベースをダウンロードしてください。

超絶に削ぎ落としたテーマとなっています。

基本のコード以外は一旦全部削除しているのでこのままでは使い物にならない状態なので ここから付け加えてオリジナルテーマを作っていきましょう。

指定したメニュー項目を非表示にしてみる

Wordpressを1度触ったことがある人であればよく分かると思いますが、 余計なメニューが多すぎて混乱することがありますよね。

なので一旦必要な項目以外は一旦非表示にしてみましょう。

ブログを投稿するだけ考えると必要メニューは

はい、たったこれだけです。 投稿者は設定とかむしろいじっちゃダメでしょって感じですね。

それでは余計な項目を消してみましょう。

functions.phpでサイドバーの項目を消す

Wordpress管理画面からも非表示設定はできるのですが、 恐らく投稿者でも編集出来てしまうので基本的にはコードで制御していきます。

私の用意したシンプルなテーマにはfunction.phpは何も記述されていない状態です。

ココに色々な制御を詰め込んでいくのがWordpressのテーマ開発の要と言っても過言では有りません。

注意点としてはphpの構文を間違えると、恐怖の真っ白画面になってブラウザからは何も見えなくなります。

そんなときはFTPに入るか直接サーバーのファイルを弄って修正するしかありません。

それではサイドバーの項目を消そうと思ってどれを消すかみてたのですが、 意外と全部必要な項目じゃないか……？って思えてきました（笑）

ともかく制御の方法を覚えていきましょう。

一旦公開するまでは必要のない「コメント」の項目を消してみましょう。

本来は専用のファイルを作って記述していったほうがいいのですが、 今の所記述内容は少ないので一旦functions.phpにすべて記載していきます。

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

<?php

//-----------------------------------------------------
// add_action
//-----------------------------------------------------
add_action('admin_menu', 'removeMenuCommand', 9999); // メニュー削除関数の実行

//-----------------------------------------------------
// 便利関数
//-----------------------------------------------------

// メニュー削除関数
function removeMenuCommand () {
  // サイドバーメニューのCommentsを削除
  remove_menu_page('edit-comments.php');
}

保存したらWordpress側のthemesフォルダに入れて管理画面から適用します。

適用したらサイトにアクセスしてみて問題なく表示されたら準備完了です！

そしてfunctions.phpに記述した内容も動いている確認しましょう。

管理画面に入ってサイドバーのPagesの下にあった「Comments」が消えているのがわかると思います。

コードの解説

「add_action」とはWordpressの独自関数です。

引数1つ目はWordpressで用意されているコマンドの指定、 2つ目はadd_actionが呼び出された後に動作するコールバック

コールバックには今回自分で作った関数である「removeMenuCommand」を指定しています。

3つ目は優先度です。

現在は極端に9999としていますが、もしこのadd_actionを他のファイルで上書きしようとしても 9999以上の優先度として設定してやらないと上書きできないようになっています。

もっとわかりやすく言うと、親テーマのadd_actionでは優先度を10とかにしておいて、 子テーマでは優先度を11とかにすれば、子テーマのadd_actionが優先されるというわけです。

逆だと子テーマのadd_actionが無駄になってしまいますので、基本的には子を優先する必要があります。

次はremoveMenuCommand関数の中身にある「remove_menu_page('edit-comments.php')」について。

読んで字のごとく、Wordpressの独自関数であるページからメニューを除外する関数を呼び出して 「コメント」を選択しているという感じです。

こうすることで編集画面からコメントで使うものが除外されるわけですね。

Wordpressの関数と自作関数の名前について

Wordpressには独自関数が沢山よういされています。

名前の特徴としては基本的にはアンダースコア「 _ 」で区切られています。

命名規則というのですが、プログラミング言語やチームによって様々な書き方があります。

本来はその規約に沿って関数の名前をつけるのが一般的なのですが、 こういったフレームワークとかを使って何かを作ろうとした場合、 同じ命名規則だとWordpressの関数なのか自分で作った関数なのかが判別が付きません。

なので独自ルールを設けておけばパット見自作関数なのかそうじゃないのかがわかりやすくなり 後からみてもデバッグするときもとても楽になります。

今回私は「lower camel case」を採用しました。

「removeMenuCommand」最初は小文字から開始し、分離できるところで大文字にしているのがわかると思います。

詳しくは「lower camel case」でググってみてください。

項目を追加してみる

先ほどはメニューを消したので、今度はオリジナルの項目を追加してみましょう。

そのテーマ独自の設定メニューがあれば、テーマのファイルを直接いじらなくて済みそうですね。

有料でテーマを販売した場合、注意書きとしてソースコードを直接弄った場合、 対象外としておくとトラブルなんかも防げたりするので、 販売するならできる限りWordpressの管理画面を操作するだけで完結するのが望ましいです。

それでは早速「Theme Config」というメニューを設けてみましょう。

中身を作る必要は今はないので、メニューをクリックしたら中身はただテキストが表示されるだけで大丈夫です。

管理画面のサイドバーに「Theme Config」メニューを追加する

管理画面のサイドバーにメニューメニューを追加するには functions.phpに以下の関数を作って呼び出してください。

<?php

//-----------------------------------------------------
// add_action
//-----------------------------------------------------
add_action('admin_menu', 'removeMenuCommand', 9999);
add_action('admin_menu', 'addMenuCommand', 9999); // 【追加】

//-----------------------------------------------------
// 便利関数
//-----------------------------------------------------

// メニュー削除関数
function removeMenuCommand () {
  // サイドバーメニューのCommentsを削除
  remove_menu_page('edit-comments.php');
}

// 【追加】管理メニューサイドバーに「Theme Options」を一番下に追加
function addMenuCommand() {
  // 管理画面にTheme Optionメニューをサイドバーに追加
  add_menu_page( 'Theme Options', 'Theme Config', 'manage_options', 'theme-options', 'themeOptionPageView');
}

// 【追加】DB保存準備関数
function themeOptionInit() {
  return 1;
}

//-----------------------------------------------------
// テーマコンフィグのView
//-----------------------------------------------------
// 【追加】ページの中身を描写するための関数を一旦空関数として作成
function themeOptionPageView() {
  return '';
}

まだ短いので今回のをまとめて追加しています。

追加部分は【追加】って書いているのですぐわかるはずです。

add_menu_pageについて

メニュー追加の要となるのが「add_menu_page」関数です。

引数の概要は以下になります。

となっています。

第１・第２引数は特に説明することはないので飛ばして

権限設定について

add_menu_pageの引数3つ目に、メニューページそのものに権限を付け加えることができます。

管理画面のどこまで変更していいかとかを設定できますが、 状況に応じて変更してください。

今回は特にこだわりがないので権限「manage_options」を設定しました。

権限の見直しはあとからでも可能なので必要に応じて変更しましょう。

権限の種類と解説については公式ページをご覧ください。

Wordpress ユーザーの種類と権限

スラッグについて

スラッグは自分のURLになる部分です。

http://localhost:3124/wp-admin/admin.php?page=theme-options

今回だとadmin.php?page=の後に「theme-options」が付与されます。

これがないと専用ページとして判定できないので必ずなにかつけておきましょう。

アドレスをみて何の設定中なのかがひと目で分かる名前が望ましいです。

呼び出す関数について

メニューをクリックした後に呼び出される関数です。

押されたら表示するテンプレートを設定したり色々できますが、 長くなりそうなので次回に回します。

今はテキトーに１を返すだけの変数を指定しているので、 アクセスしても何も表示されないページがでてくるとおもいます。

アイコンと表示位置について

最後に省略した６と７の引数は必要であれば各自設定してください。

何も設定しないとアイコンは歯車になるようで、 表示位置は環境によって変わるかもしれません。

私の場合はPostsとMediaの間に表示されました。

次回はテーマを編集する中身を作っていきます。

始めに必要になりそうな要素を洗い出して設計して、 後から追加しやすいコードを組んでいきましょう。