【自分用まとめ】wordpressでデモページを準備したい。【プラグインなし】

サイトの準備を本格的にしていこうと思いまして何ができるかを探す。
新しい技術や参考になるソースをデモページで残して置いたら後で楽だなと思ったので。
wordpressでどうすれば良いかを考えました。

CODEPENで制作してそれをウィジェットで貼り付ければ良いなという思いも有りますがまた別の話として。

まとめていたらかなり長くなってしまいました。

外部サイトで良いなと思った手法をwordpress内に実際に挙動が確認できるデモページで準備したい。

タイトルのとおりなのですが、wordpressはサーバーのテーマファイルの下に適当にフォルダを作り、そこにhtml形式のファイルを置いても、外部からアクセスして見ることができません。
※多分すごい人がやればそれも可能だとはおもうのですが、下手にカスタマイズしてしまうとセキュリティーが不安です。

ogp設定やアナリティクスのタグなどのheadはデザインに影響しない程度に共有して使いまわしたい。

headの情報はSEO的にも重要です。meta情報を０から用意するのは大変ですし、新しいogpの設定なども差異が出ないようにしたいため。
他のページと同じ設定のを流用出来るように考えました。

記事や固定ページと分けたい。（カスタム投稿タイプというのが良いらしい）

最初は固定ページでデモページを作ろうと思ったのですが、毎回テンプレートの変更が面倒だったので他にいい手がないか考えていたら
普段ブログやニュースサイトばかり作っていた自分にはあまり馴染みなのない「カスタム投稿タイプ」というものが有ることを知りました。
これはプラグインで、簡単に実装できるみたいですが、しかし・・・。

今回はプラグインを使わないで実装したい。

自分が意図しない使わな高機能なものが一緒に導入されwordpressの動作が重くなってしまうのは嫌なので、
最低限の機能を実装することとし、プラグインは使わずに進めます。
追加するコードはfunction.phpだけになります。


//カスタム投稿タイプ：動作デモ
function custom_post_type_demo() {
     $labels = array(
          'name' => _x('動作デモ', 'post type general name'),
          'singular_name' => _x('動作デモ', 'post type singular name'),
          'add_new' => _x('新規追加', 'book'),
          'add_new_item' => __('新規項目追加'),
          'edit_item' => __('編集'),
          'new_item' => __('項目編集'),
          'view_item' => __('項目をプレビュー'),
          'search_items' => __('項目を検索'),
          'not_found' =>  __('項目はありません'),
          'not_found_in_trash' => __('ゴミ箱に項目はありません'),
          'parent_item_colon' => ''
     );
     $args = array(
          'labels' => $labels,
          'public' => true,
          'publicly_queryable' => true,
          'show_ui' => true,
          'query_var' => true,
          'rewrite' => true,
          'capability_type' => 'post',
          'hierarchical' => false,
          'menu_position' => 4,
          'supports' => array('title','editor')
     );
     register_post_type('demo',$args);
}
add_action('init', 'custom_post_type_demo');

もちろん自分で書けるはずもなくサイトで素晴らしいコードを見つけたのでそちらを参照させていただきました。

参考にさせてもらったのがサイト。
https://blog.gouten.net/article/my-wordpress-demo-tutorial/
俺流の！WordPressで動作デモのページを作るチュートリアル


add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'acme_product',
    array(
      'labels' => array(
        'name' => __( '新規カスタム投稿' ), //メニューバーに表示される名前です。
        'singular_name' => __( 'Product' ) //内部的に必要な名前です。
      ),
      'public' => true,
      'has_archive' => true,
    )
  );
}

このコードでもカスタム投稿が追加できます。
function.php内で追記するだけで簡単に出来ます。

細かいパラメータの説明はこちらを観てください。
関数リファレンス/register post type – WordPress Codex 日本語版

デモページは専用のテンプレートで表示させたい。

wordpressは、内部で自動的に優先度の高いテンプレートから順番に探して表示されるようになっています。
カスタム投稿タイプは 次の順番で表示されます。
1　single-{投稿タイプ名}.php
2　single.php
3　singular.php
4　index.php

今回は「1　single-{投稿タイプ名}.php」を使ってカスタム投稿タイプのテンプレートを固定します。
作ったファイルをsingle.phpがある階層と同じ場所に置いてください。


<?php get_header(); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <?php the_content(); //コンテンツ ?>
    <?php endwhile;
    endif; ?>
<?php get_footer(); ?>

自分はこのような簡素なテンプレートを設置しました。

アーカイブも同じように分けることが出来るらしいのですがここでは割愛します。気になる方は以下のリンクで観てください。
カスタム投稿タイプのテンプレート階層[single-投稿タイプ.php][archive-投稿タイプ.php]
https://noumenon-th.net/programming/2016/06/24/single_archive_template/

少しつまずいた事がありました。

<?php get_header(); ?>の中にはメニューや、サイトのロゴを入れている方が多いと思います。
自分もそうだったので、関数を使ってカスタム投稿タイプの時は非表示にしようと思ったのですがうまいく行きません…。


<?php if (!is_single('demo') ) { //カスタム投稿タイプでは表示させない。 ?>
  ロゴ、ナビメニュー表示させたくない項目
<?php ｝?>

最初はなんでだめなんだろう・・・調べてみるとこちらが良いみたいです。


<?php if (!is_singular('demo') ) { //カスタム投稿タイプでは表示させない。 ?>
  ロゴ、ナビメニュー表示させたくない項目
<?php ｝?>

(!is_single(‘投稿タイプ’) ではなく、(!is_singular(‘投稿タイプ’)でした。
これで無事に余計なものが読み込まれなくなりました。

参考サイト
https://php1st.com/2021
is_singleはカスタム投稿タイプの条件分岐には効かない

補足：記事を書く時、環境によりwordpressが自動で、<br>改行タグ<p>タグを入れてくれるのですが、それがデモページでも入っていました。
ここにはソースコードが直接有るので勝手に改行タグなどが入ると表示が崩れてしまう恐れがあります。
調べたところ、カスタム投稿ページでもその問題が起きてしまうので、テンプレートのを以下のようにします。


<?php remove_filter ('the_content', 'wpautop'); //the_content(); の手前に入れる ?>
<?php the_content(); //コンテンツ ?>

remove_filterを入れると、自動補完が無効になります。の必ず手前に書いてください。

いよいよ記事も準備してプレビューしてみると

いざ記事を公開とおもったら、表示されない問題が発生しました。(´ε｀；)ｳｰﾝ…
これも調べるとすぐに見つかりました。

https://www.nishi2002.com/5126.html
カスタム投稿タイプの記事が表示されないとき

ダッシュボードのメニュー「設定」→「パーマリンク設定」メニューで「変更を保存」ボタンをクリックしてください。
これで設定が上書きされて、投稿が無事表示されました。

以上で大体の終わりです。

他のWEB / wordpress