The Thorに標準搭載カスタム投稿のGutenbergを有効にする方法【Wordpressカスタマイズ】 | 東京都墨田区のHP・デザイン・イラスト制作会社 TenCy株式会社
    • HOME
    • お知らせ
    • The Thorに標準搭載カスタム投稿のGutenbergを有効にする方法【Wordpressカスタマイズ】
  • 2021.12.22 2022.10.26

    The Thorに標準搭載カスタム投稿のGutenbergを有効にする方法【WordPressカスタマイズ】

    弊社では、無料や有料のワードプレステーマを用いたサイト制作・デザインカスタマイズも請け負っています。その際に得られた経験や詰まったポイントなどを紹介していきます。

    有料テーマ『The Thor(ザ・トール)』標準ではクラシックエディタになる・・・!!

    公式の画像を引用させて頂いています https://fit-theme.com/the-thor/

    サイトデザインの綺麗さや豊富な機能があって弊社でも利用させて頂いたことがあるテーマ「The Thor」のカスタマイズ記事です。The Thorはブログ用の投稿機能の他に、トップページで別領域で表示するためのカスタム投稿が標準で用意されています。

    弊社が運用するメディア「挑戦を応援するメディア:TryLog」もThe Thorを利用しています

    こちらの経営ニュース投稿は、Thorに標準で用意されているカスタム投稿を利用してトップページに表示しています。

    ですが、このカスタム投稿、一点問題があります。そのまま、標準設定では、クラシックエディタでの投稿画面が表示されてしまうのです。

    そこで、今回はThe Thor のカスタム投稿においてgutenbergを有効にする方法を紹介します。

    The Thor のカスタム投稿のグーテンベルクを有効にするには

    テーマファイルをカスタマイズする必要があります。修正箇所は1行で済むので、本テーマをカスタマイズするときの例を紹介したいと思います。

    The Thorのカスタム投稿設定を修正する

    ワードプレスの管理画面から、外観>テーマエディタを選択します。

    テーマの編集画面になったら、親テーマ「The Thor」の inc フォルダ内にある post.php を選択します。

    ずずずっと下にスクロールしていくと、ありました。カスタム投稿の設定箇所です。目印は、デフォルトのカスタム投稿名が「お知らせ」となっている部分です。

    ここの設定で、以下の一文を設定に追加すればOKです。

    'show_in_rest' => true,

    追加した結果はこちら。

    		register_post_type(
    			'custom', //投稿タイプ名
    			array(
    				'labels' => array(
    					'name'               => $name, //管理画面などで表示する名前
    					'singular_name'      => $name, //管理画面などで表示する名前(単数形)
    					'menu_name'          => $name, //管理画面メニューで表示する名前(nameより優先される)
    					'all_items'          => $name.'一覧', //管理画面メニューの一覧リンクの文字
    					'add_new_item'       => '新規'.$name.'を追加', //新規作成ページのタイトルに表示される名前
    					'add_new'            => '新規追加', //メニューの新規追加ボタンのラベル
    					'new_item'           => '新規'.$name, //一覧ページの「新規追加」ボタンのラベル
    					'edit_item'          => $name.'の編集', //編集ページのタイトルに表示される名前
    					'view_item'          => '投稿を表示', //編集ページの「投稿を表示」ボタンのラベル
    					'search_items'       => $name.'を検索', //一覧ページの検索ボタンのラベル
    					'not_found'          => $name.'が見つかりませんでした。', //一覧ページに投稿が見つからなかったときに表示
    					'not_found_in_trash' => 'ゴミ箱内に'.$name.'が見つかりませんでした。' //ゴミ箱に何も入っていないときに表示
    				),
    
    				'public'        => true, //管理画面の表示・フロント画面での表示・検索結果の表示・カスタムメニューでの表示
    				'show_ui'       => true, //管理画面の表示
    				'has_archive'   => true, //アーカイブページの作成
    				'menu_position' => 20, //管理画面メニュー位置
    				'menu_icon'     => 'dashicons-book-alt', //管理画面メニューアイコン
    				'hierarchical'  => false, //階層構造(固定ページのような)
    				'show_in_rest' => true,
    				'supports' => array( //利用パーツ
    					'title',
    					'editor',
    					'author',
    					'thumbnail',
    					'revisions',
    					'comments',
    					'trackbacks',
    					'excerpt',
    					'custom-fields',
    				),
    			)
    

    The Thorのカスタマイズの注意点

    このカスタマイズの注意点は、「親テーマをそのまま編集している」点にあります。テーマのバージョンアップを行うと、このカスタマイズが上書きされてクラシックエディタに逆戻りされる可能性がありますので、テーマのアップデートを行う際には注意が必要です。


    まとめ

    The Thorのグーテンベルク対応方法を紹介させて頂きました。これからはブロックエディタでのカスタマイズがワードプレスの標準になっていくと思いますので、是非グーテンベルクを利用してみてくださいね。

    弊社では、既存テーマをカスタマイズしてお手頃な価格・コストでのサイト制作も請け負っています。ホームページ制作にお困りの際はお問い合わせください。

    OTHER NEWS

    一覧にもどる