仕事でワードプレスを使う場合、クライアントの要望に応じて、「既存テーマ」を利用するまたは「独自テーマ」を作成するという2つの方法があります。私の場合は、殆どが独自テーマです。既存テーマを使うと、細かいクライアントの要望がかなわないことが多く、強引なカスタマイズが必要になって、既存テーマの持つ汎用性の高さが失われることになるので、悩ましく・・・

ワードプレスのテーマを自作の場合、ロゴ画像の追加などカスタマイザーに独自項目をつけて多少便利にしています。カスタマイザーは、画面が手狭なので、独自の管理画面メニューを追加したいというのが今回のテーマ。

今回のケースはこちらです。

  1. マルチサイトに使えるテーマを作成中。サブサイトごとにトップページのメイン画像とキャッチテキストを変更したい。テーマに直接記述せず、管理画面から入力させたい。
  2. トップページのメイン画像は、静止画でも動画でも良いように、HTMLタグを使いたい。

①のケースは、固定ページをホームにして解決させるのが通例ですが、トップページにPHPを書きたい箇所が多いため、今回はホームは専用テンプレートになっています。そこに、メイン画像を組み込むための管理画面です。

少々ハマった部分もありましたので、メモしておきます。今回は参考サイトが多いです。マルチサイトに関わらず、自作テーマで、クライアントさんが入力・更新出来る箇所を作りたいケースにも利用できます。


https://jajaaan.co.jp/wordpress/wordpress-admin-page/
独自管理画面の基本的な作成方法(functions.phpに書き込む方法)

https://webmist.info/wordpress-original-setting-page/
独自管理画面の基本的な作成方法(独自画面用テンプレートを作成する方法)

https://pico-cre.com/wp-memo/post-1569/
独自管理画面内の要素の追加方法など

管理画面に独自項目を追加する

既存管理メニューのように、サブ項目を作ることもできますが、今回はサブ項目はありません。functions.phpに全部書き込むのはあまり好きではないので、参考サイト2番目の独自管理画面用テンプレートを作成する方向で進めました。

//テンプレートに独自管理画面を追加
add_action( 'admin_menu', 'my_setting_page' );
function my_setting_page() {
	add_menu_page('独自設定', '独自設定', 'manage_options', 'my_setting', 'add_my_setting', 'dashicons-welcome-learn-more', 3);
}
//独自設定用テンプレート読み込み
function add_my_setting() {
	include TEMPLATEPATH ."/my-setting.php";
}

これで、独自管理画面項目が追加されます。「my-setting.php」というテンプレートに管理画面の内容を記載します。

<div class="wrap">
<h1 class="wp-heading-inline">ホームページメイン画像</h1>
<h2>ソースを追加</h2>


<?php
$_POST = array_map('stripslashes_deep', $_POST);
$_REQUEST = array_map('stripslashes_deep', $_REQUEST);

add_option('my_mv');
if ($_REQUEST['my_mv']) update_option('my_mv', $_REQUEST['my_mv']);
?>
<form method="post" action="admin.php?page=my_setting">
<textarea autocomplete="off" dir="auto" class="large-text code" rows="10" cols="60" name="my_mv"><?php echo stripslashes(get_option('my_mv')); ?></textarea>
<?php submit_button(); ?>
</form>

<?php
if(isset($_POST['my_mv'])){ 
    echo '<div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました。</strong></p></div>';
}
?>

</div>

htmlを記述したいので、textareaを使っていますが、ここにhtmlタグを書いてPOST送信すると、データ内のダブルクォーテーションやシングルクォーテーションに、バックスラッシュがついてしまうんですよ・・困ったなと思って調べてみたところ、・・・どうやらPHPのマジッククオートが働いているらしい。

https://sakura.monte-verita.biz/3786

そこでこれを回避する処理が入っています。

$_POST = array_map('stripslashes_deep', $_POST);
$_REQUEST = array_map('stripslashes_deep', $_REQUEST);

ここのところです。
これで無事にHTMLをPOST送信できます。あとはテンプレート内で、この記述を使いたい箇所に

<?php echo get_option('num1'); ?>

という感じで呼び出すことが出来ます。