【SWELL】投稿(編集)画面にメモ欄を設置するカスタマイズ

2023年7月11日2023年7月28日

ここでは、WordPressの人気テーマ「SWELL」の投稿(編集)画面に「メモ欄」を設置する方法をご紹介します。

CocoonからSWELLに乗り換えたブロガーさんは多いと思います。

≫ WordPressテーマ「SWELL」

私は3～4年ずっとCocoonユーザーでしたが、デザインと機能が気に入りSWELLを購入しました。

有料テーマはSWELLが初めてですがデザイン・カスタマイズ要素にぬかりは無く、期待通りの満足度で買ってよかったです。

しかし、使っている中で「え！？、これ無いの？」と感じたのが「メモ欄」です。

Cocoonには実装されているので、どのWordPressテーマにも普通にある機能だと勘違いしてましたがCocoonならではの機能でした。

調べると、Cocoon製作者「わいひら」さんが、メモ欄を実装する記事を公開されていました。

参考≫ コピペ一発でWordPressの投稿・固定ページの管理画面にメモを残す機能を実装する方法

SWELLで試したら実装できたので、SWELL版として手順をご紹介します。

＜スポンサーリンク＞

SWELL：投稿画面にメモ欄を設置する方法

STEP

ダッシュボードで「外観」＞「テーマファイルエディター」を選択します。

STEP

テーマ編集の管理画面になるので「SWELL CHILD: スタイルシート (style.css)」なことを確認し右メニューの「テーマのための関数(functions.php)」をクリック。

STEP

functions.phpに切り替わったら編集エリアの下に下記のHTMLコードをコピペしてください。

コピーボタン↓

///////////////////////////////////////
// カスタムボックスの追加
///////////////////////////////////////
add_action('admin_menu', 'add_memo_custom_box');
if ( !function_exists( 'add_memo_custom_box' ) ):
function add_memo_custom_box(){
  //メモボックスの追加
  add_meta_box( 'singular_memo_settings','メモ', 'view_memo_custom_box', 'post', 'side' );
  add_meta_box( 'singular_memo_settings','メモ', 'view_memo_custom_box', 'page', 'side' );
}
endif;


///////////////////////////////////////
// 表示
///////////////////////////////////////
if ( !function_exists( 'view_memo_custom_box' ) ):
function view_memo_custom_box(){?>
	<textarea name="the_page_memo" placeholder="" rows="10" style="width: 100%;"><?php echo get_the_page_memo(); ?></textarea>
	<p>この投稿に記録しておきたいメモがある場合は記入してください。</p>
  <?php
}
endif;

///////////////////////////////////////
// 保存
///////////////////////////////////////
add_action('save_post', 'memo_custom_box_save_data');
if ( !function_exists( 'memo_custom_box_save_data' ) ):
function memo_custom_box_save_data($post_id){
  if (isset($_POST['the_page_memo'])) {
    $the_page_memo = $_POST['the_page_memo'];
    update_post_meta( $post_id, 'the_page_memo', $the_page_memo );
  }
}
endif;

///////////////////////////////////////
// メモ内容の取得
///////////////////////////////////////
if ( !function_exists( 'get_the_page_memo' ) ):
function get_the_page_memo($post_id = null){
  if (!$post_id) {
    $post_id = get_the_ID();
  }
  $value = get_post_meta($post_id, 'the_page_memo', true);
  return $value;
}
endif;

※わいひらさんのは「投稿一覧」にもメモ欄を設置するコードが入ってますが、上記はそれを省いて投稿画面のみに設置するようにしています。