WordPressのカスタム投稿タイプを追加して技術系記事の動作デモページを実装する方法

WordPress利用者
「Web技術系のブログ記事を書く上で、動作デモ用のページを作りたい。どうやって実装するのがいいんだろう?」
こういった悩みにお答えします。
本記事の内容
- 動作デモページの簡単な仕様の説明
- 動作デモページ実装の具体的な手順
こんにちは、mine(@mineblog7)です。
ブログ歴は4年ほどになります。現在はmineblogを一人で運営しています。
Web技術系の記事を書く人向けに、以前「highlight.js」でソースコードのハイライト表示を設定しました。
【highlight.js】WordPressでのソースコード埋め込み実装手順
ソースコードハイライト表示ライブラリ「highlight.js」をWordPressに導入するためのガイドページです。手軽に導入できて読み込みも早いので、プログラミング技術系の記事をWordPressで書きたいと言う方はぜひ使ってみてください。
ソースコードの表示だけだと分かりづらい時、動作デモページが必要となる場合があります。
WordPressのカスタム投稿を使用してデモページを実装する方法を紹介します。
動作デモページの簡単な仕様
まずは、当ブログで実装した動作デモページの仕様をリストにしました。
動作デモページ仕様
- 通常の投稿と同じように新規作成・編集ができるようにする
- Googleにインデックスさせないようにする(noindex,nofollowにする)
- URLを「https://(domain_name)/demo/xxx/」の形にする
これらの仕様を元に、実装方法を詳しく説明します。
動作デモページ実装
基本的に、動作デモページはWordPressのプラグインを使用します。
簡単な流れ
- カスタム投稿タイプの追加が簡単にできるWordPressプラグイン「Custom Post Type UI」をインストールして有効化する
- 「Custom Post Type UI」で動作デモページ用の投稿タイプを新規で追加する
- head内にnoindex, nofollowタグが記述されるように設定する
- 実際にデモページを作成する
それぞれ詳しく説明します。
カスタム投稿タイプの追加が簡単にできる「Custom Post Type UI」をインストールして有効化する
WordPressの管理画面で、プラグインの新規追加で「Custom Post Type UI」を検索してインストール・有効化します。
有効化して、WordPress管理画面メニューに「CPT UI」の項目が追加されたらOKです。
「Custom Post Type UI」で動作デモページ用の投稿タイプを新規で追加する
メニューの「CPT UI」リンクをクリックして、さらに「投稿タイプの追加と編集」リンクをクリックして編集画面を開きます。
新規投稿タイプを追加で、下記のように入力します。
基本設定グループ
- 投稿タイプスラッグ:demo
- 複数形のラベル:DEMO
- 単数形のラベル:DEMO
設定グループ
- 検索から除外:true
この他の項目はデフォルト設定でOKです。「投稿タイプを追加」ボタンをクリックして、新規登録すると、メニューにDEMOの項目が追加されます。
head内にnoindex, nofollowタグが記述されるように設定する
<?php
if(is_singular('demo')){
echo '<meta name="robots" content="noindex, nofollow" />'."\n";
}
?>
使用しているテンプレートの状況によってnoindex,nofollowの記述の方法に差異があるかと思いますが、今回はheader.phpなどに直接記述する方法を紹介します。
is_singular('スラッグ名')
でデモページであるかどうかを判別して、trueであればnoindex,nofollowを記述するようにしています。
実際にデモページを作成する
通常の投稿と同様に、DEMOから新規で動作デモページを作成します。
通常の投稿とほぼかわらないレイアウトになっています。
URLの形も「https://(domain_name)/demo/xxx/」にします。
デモ用のCSSやJavaScriptファイルを別に用意して、DEMOカスタム投稿だけで読み込むように設定すると、他のページでの余計な読み込みを減らすことができて、管理も楽になります。
まとめ
デモページを作成・更新するときは通常の投稿とほぼ変わらない感覚でできます。
これくらいのデモページで十分だという方は、導入してみてはいかがでしょうか。
【参考】WordPressでのソースコード埋め込み方法
【徹底比較】WordPress記事へのソースコード埋め込み方法紹介
WordPress記事へのソースコード埋め込み方法を大きく4タイプに分けて紹介・比較します。用途にあった方法を見つけるヒントにしてください。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果