2020/07/21

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

Blog Programming 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日分を取得した話

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

Programming WordPress