WEB ブログ運営

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

この記事について

WordPressのカスタム投稿を使用してデモページを実装する方法を紹介する記事です。

本記事の内容

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

こんにちは、タカシです。
ブログ歴4年、Web製作歴7年になります。

Web技術系の記事を書こうということで、以前「highlight.js」でソースコードのハイライト表示を設定しました。

ソースコードハイライト表示ライブラリ「hightlight.js」をWordPressで導入する方法

この記事について WordPressで「hightlight.js」を導入する方法を具体的に紹介する記事です。 当ブログもWeb技術系の記事を書いていこうということで、今回を機にソースコードを記事内に ...

続きを見る

ソースコードの表示だけだと分かりづらい時、動作デモページが必要となる場合があります。

今回、当ブログでも動作デモページを実装しましたので、その実装手順を詳しくご紹介します。

動作デモページの簡単な仕様

まずは、当ブログで実装した動作デモページの仕様をリストにしました。

動作デモページ仕様

  • 通常の投稿と同じように新規作成・編集ができるようにする
  • Googleにインデックスさせないようにする(noindex,nofollowにする)
  • URLを「https://have-nots.com/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から新規で動作デモページを作成します。

DEMO

通常の投稿とほぼかわらないレイアウトになっています。URLの形も「https://have-nots.com/demo/xxx/」になっています。

デモ用のCSSやJavaScriptファイルを別に用意して、DEMOカスタム投稿だけで読み込むように設定すると、他のページでの余計な読み込みを減らすことができて、管理も楽になります。

まとめ

デモページを作成・更新するときは通常の投稿とほぼ変わらない感覚でできます。
これくらいのデモページで十分だという方は、導入してみてはいかがでしょうか。

プロフィール

当ブログにアクセスしていただいてありがとうございます。 管理人の「ライ」と申します。

続きを見る

テスト

テスト2

-WEB, ブログ運営

Copyright© HaveNots , 2020 All Rights Reserved.