Web技術系中心に割と何でも更新中

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

Blog Programming Web

この記事について
Web制作者

WordPress利用者
「Web技術系のブログ記事を書く上で、動作デモ用のページを作りたい。どうやって実装するのがいいんだろう?」

こういった悩みにお答えします。

本記事の内容

  • 動作デモページの簡単な仕様の説明
  • 動作デモページ実装の具体的な手順

こんにちは、mine(@mineblog7)です。
ブログ歴は4年ほどになります。現在はmineblogを一人で運営しています。

Web技術系の記事を書く人向けに、以前「highlight.js」でソースコードのハイライト表示を設定しました。

ソースコードの表示だけだと分かりづらい時、動作デモページが必要となる場合があります。
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でのソースコード埋め込み方法

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果