GOUTEN.NET

デザイナー・GOUTENの生態を観察するブログ

俺流の!WordPressで動作デモのページを作るチュートリアル

この記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それ以外の場合はどうぞこの記事をお楽しみください。

HTMLやCSS、Javascriptの動作を紹介するときにたまに必要な「動作デモ」や「コードスニペット」のページ。
WordPressでやる場合に「普通にカスタムポスト作って投稿エリアに書いたらいいやん」と思うんですけど、できれば楽して作りたい。

というわけで、僕が以前使っていた動作デモページの作り方、教えます。
たぶんWordPressで情報発信したいけど面倒だっていうグータラな初心者向けデザイナー向けだよ。
PHPには今回対応しません。でも何らかの方法でできるかとは思います。

え、知ってるしとっくにやってる?
そこヤジ飛ばさないで最後までみておくんなまし><!

本当は自分で振っておいて誘導尋問的にリクエスト受けたんですけどね。

というわけで、「以前運営して今は放置してそろそろこっちに統合しようかと思っている忘備録Tipsブログ」を作った時に使ったテクニックを紹介するよ!
もうこのブログでも同じ構成にしてるから、忘備録Tipsブログの方はいつ閉鎖してもいいね!
やったね!

もくじ

  1. はじめに
  2. 入力する項目を決め、何が必要となるのか見極める
  3. ワイヤーフレームを書いたり静的HTMLで組んだりする
  4. カスタム投稿タイプでデモ専用の投稿エリアを作る
  5. カスタムフィールドテンプレートでスクリプト用のフィールドを作る
  6. カスタムフィールドを出力するテンプレートを作成する
  7. おまけ:WordPressがデフォルトで出力するライブラリとぶつからないようにする
  8. おわりに

はじめに

この記事では以下のことを前提としてお話します。

  • JSFIDDLEjsdo.it等のコード投稿・共有サイトを使わない
  • テンプレートにJavascriptやその他ライブラリを使わない(動作させるコードに対するライブラリは後入れ)
  • 1つのページにつき1つのライブラリしかつかわない
  • WordPressプラグインは使います
  • WordPressのバージョンは3.2以上でしか試していません。

僕が使ってたってだけだからね。参考程度にしてくれればいいと思う。
後ろ向き発言バンザイ!\(^o^)/

あと、完成形はこんな感じです。

動作デモ用完成ページ


ぼくのかんがえたさいきょうの動作デモページ

[ 目次へ戻る ]

入力する項目を決め、何が必要となるのか見極める

今回はHTMLに対してCSSとJavascriptでゴニョゴニョするいつものやつを作ります。

まずは動作サンプルとして他のライブラリやスクリプトと競合しないページを作りたいので独自テンプレートを用意しなくてはなりません。
動作デモを随時修正したい場合とかにカスタム投稿ポストをつくって専用の投稿エリアを作ってもいいですし、カテゴリで済ますという手もあります。

とりあえず今回はカスタム投稿ポストを使ってみることにします。

次に、なるべく投稿エリアでHTMLタグを使って整形させたくないので、入力フィールドを独自で用意して、その部分をまとめて埋め込むのが理想でしょうか。

今回の入力項目として必須なのは以下のとおり。

  1. このデモページの説明 – h2、description等に使います
  2. 動作サンプルのCSSの入力欄
  3. 動作サンプルのJavscriptの入力欄
  4. インストールしたライブラリの選択 – できればバージョンごとで分けたい
  5. 外部ライブラリを使う場合のライブラリURL入力欄
  6. 元記事のタイトルとURL入力欄

上記ができるのって、やっぱりカスタムフィールドですよね。
というわけで凡庸に使える「カスタムフィールドテンプレート」を使用してこれらを実現しようと思います。

[ 目次へ戻る ]

ワイヤーフレームを書いたり静的HTMLで組んだりする

先ほど必須項目として挙げたものをもとに簡単にワイヤーフレームを作ったり、それを元に軽くコーディングしたりします。
今回はワイヤーフレームなしでいきなりコーディングしちゃっています。

で、HTML/CSSは以下のようにしました。

HTML

ハイライトされている部分がカスタムフィールドで入力したもので置き換えたり条件分岐で出力するものを変えたりループ部分になったりするところです。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8" />

<title>動作デモの記事タイトル | サイトタイトル</title>

<meta name="keywords" content="">
<meta name="description" content="動作デモページのdescription">

<meta name="robots" content="noindex,nofollow">

<link rel="stylesheet" href="動作デモページ表示用CSSのURL">

<style type="text/css">
カスタムフィールドに入力したCSSのコードを表示
</style>

<script type="text/javascript" src="javascriptライブラリのURL"></script>

<script type="text/javascript">
カスタムフィールドに入力したJacscriptのコードを表示
</script>

</head>

<body id="demo">
<div id="top" class="wrap">

     <header id="head" class="clr">
          <div class="site_title"><a href="フロントページヘのリンク">サイトタイトル</a></div>
          <div class="description">サイトdescription</div>
     </header>

     <section id="contents">
          <hgroup>
               <h1>動作デモの記事タイトル</h1>
               <h2>動作デモページのdescription</h2>
          </hgroup>

          <aside id="linkArea">
               <div class="inner">
                    元記事:<a href="元記事リンクURL" target="_blank">元記事リンクタイトル</a>
               </div>
          </aside>

          <article id="postBody">
               投稿記事内容
          </article>

          <aside id="linkArea">
               <div class="inner">
                    元記事:<a href="元記事リンクURL" target="_blank">元記事リンクタイトル</a>
               </div>
          </aside>

     </section>

     <footer>

          <div id="copyright">
               ここに書いてある情報は、特に断り書きがない限り、自由に使ってください(コピー、改変を含む)。 転載先においても転載自由にしてかまいません。
          </div>
     </footer>

</div>
</body>

</html>

\超シンプル/
必要最低限出力する箇所があれば、自由にマークアップしちゃってください。

なるべくデモのコードと鑑賞しないように最小限のid,class名をつけてあげるといいです。
またはユニークなid,classを作って逐一指定していくという手もありますね。

フッターはコピーライトとか記述してください。
面倒なら記述しなくてもいいです。

CSS

コードが超長いので折りたたんでいます。見たいorコピーしたい方は以下の「ソースを見る」をクリックして展開してください。

/* Reset */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
     font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
     line-height: 1.5;
     text-align: center;
}

*:first-child + html body {
     font-family: "メイリオ",Meiryo,verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

img {
     border: none;
     }

a {
     color: #666666;
     text-decoration: underline;
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

a:hover {
     color: #990000;
     text-decoration: underline;
}

h1,h2,h3,h4,h5,h6 {
     margin: 0;
     padding: 0;
     font-size: 12px;
}

ul li {
     list-style-type: none;
     }

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* ClearFix */
/* Thanks for Kojika17 - http://kojika17.com/2011/04/floatclearfix.php */

.clr:before,
.clr:after {
    content:"";
    display:table;
}

.clr:after {
    clear:both;
}

.clr {
    zoom:1;
}

/* common */

html {
     overflow-y: scroll;
}

body{
     font: 12px Verdana, Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'MS Pゴシック', sans-serif;
     background: #000000;
     color: #b2b2b2;
     line-height: 1.5em;
}

.wrap {
     min-width: 880px;
     text-align: center;
}

/* header */

#head {
     width: 820px;
     height: 30px;
     padding: 20px 30px;
     background: #000000 url(./images/title_bg.png) 30px 20px no-repeat;
     color: #666666;
     margin: 0 auto;
     text-align: left;
     position: relative;
}

#head .site_title a {
     display: block;
     width: 142px;
     height: 0;
     padding-top: 30px;
     overflow: hidden;
     }
#head .site_title a:hover {
     background: url(./images/title_hover.png) 0 0 no-repeat;
}

#head .description {
     display: none;
}

/* search box */

#head .search {
     position: absolute;
     right: 40px;
     top: 20px;
}

#head .search h2 {
     display: none;
}

#head .search input[type="text"] {
     padding: 4px;
     width: 200px;
     background: #191919;
     border: 1px solid #333333;
     color: #cccccc;
     border-radius: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
}
#head .search input[type="button"],
#head .search input[type="submit"] {
     padding: 5px 10px;
     background: #333333;
     border: none;
     color: #999999;
     border-radius: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
}
#head .search input[type="button"]:hover,
#head .search input[type="submit"]:hover {
     background: #cc0000;
     color: #cccccc;
}
#head .search input[type="button"]:active,
#head .search input[type="submit"]:active {
     background: #990000;
     color: #999999;
}

/* seciron common */

#contents {
     color: #333333;
     background: #f9f9f9;
     padding: 20px 0 0 0;
}

hgroup {
     padding: 20px 20px 10px 20px;
}

hgroup h1,hgroup h2 {
     width: 800px;
     margin: 0 auto 10px auto;
     text-align: left;
}

hgroup h1 {
     font-size: 24px;
     margin-bottom: 1em;
}

/* article */

article {
     width: 800px;
     margin: 0 auto;
     text-align: left;
     padding: 20px 10px;
     font-size: 14px;
     padding: 2em 10px 1em 10px;

}

article p {
     margin-bottom: 1em;
}

article h3 {
     background: #191919;
     color: #ffffff;
     margin: 2em 0 0.5em 0;
     display: inline-block;
     padding: 5px 10px;
     border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     -o-border-radius: 4px;
     -webkit-border-radius: 4px;
}

article blockquote {
     padding: 1em;
     border: 1px solid #dddddd;
     background-color: #eeeeee;
     font-size: 13px;
     margin-bottom: 1em;
}

article aside {
     padding: 1em;
     border: 1px dotted #cccccc;
     font-size: 13px;
     margin-bottom: 1em;
}

/* aside link */

aside#linkArea {
     border-top: 1px dotted #cccccc;
     border-bottom: 1px dotted #cccccc;
     font-size: 12px;
}

aside#linkArea .inner {
     text-align: left;
     width: 800px;
     padding: 10px 20px;
     margin: 0 auto;
}

aside a {
     font-weight: normal;
}

/* footer */

footer {
      width: 800px;
      margin: 0 auto;
      text-align: left;
     padding: 20px;
     color: #999999;
     font-size: 11px;
}

HTMLのマークアップに添って、CSSも最低限のデザインを保つくらいでいいです。
もしCSSを当てるなら、h1〜h3、blockquoteとかリストタグとかのスタイルは欲しいかな。

リセット関係のやつも好きなのを使ったらいいと思います。
デモ用のCSSと干渉する可能性もあるので、CSSはなくてもいいくらいです。

[ 目次へ戻る ]

カスタム投稿タイプでデモ専用の投稿エリアを作る

カテゴリで分けるよという人は飛ばしても問題無いです

上記のようなデモページ専用の投稿エリアを作ります。
funcitons.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');

今回はめんどくさいのでこんな感じで記述を追加します。
ハイライト部分の「demo」とか「動作デモ」とかを任意の単語に変えてください。

間違ってるかもなんでご指摘あればコメントにてお願いします。

他にも投稿したメッセージとかタクソノミーとか色々変更できるのですが、必要に応じて追記してください。
以下の記事がとても参考になります。(他にも色々ググったらあるよ)

でも、こんなことしなくても
ぶ っ ち ゃ け プ ラ グ イ ン な ら 余 裕 で す 。

Custom Post Type UI
http://wordpress.org/extend/plugins/custom-post-type-ui/

今回は例によって使いませんが、使って損することはないですので。

カスタム投稿タイプを作成したら、投稿タイプのスラッグ(今回の場合「demo」)を覚えておきましょう。カスタムフィールドテンプレートの設定で使います。
カスタムポストタイプ以外でデモページを作る人は、カテゴリーIDとか覚えていれば大丈夫です。

カスタム投稿タイプのほうが、あとからまとめ作るときとか便利だと思いますよ?

[ 目次へ戻る ]

カスタムフィールドテンプレートでスクリプト用のフィールドを作る

さてここからが本番です。
入力を楽をするためにカスタムフィールドをいじります。

使うのは毎度おなじみのアイツ、「Custom Field Template」です。

Custom Field Template Plugin

インストールして有効化したら、投稿画面に出力するフィールドの設定をします。

各項目のスクリーンショットにあるように、まずは上から順番に入力項目を埋めていきます。
必要ない部分は省いていますのでここで記入していない部分で必要な部分がありましたら各自埋めていってください。

各種設定をする – 入力項目設定編

まずは基本設定となる部分のカスタムフィールドを作成します。
入力する項目を決め、何が必要となるのか見極めるの項目でも挙げた、以下の6点の設定です。

  1. このデモページの説明
  2. 動作サンプルのCSSの入力欄
  3. 動作サンプルのJavscriptの入力欄
  4. インストールしたライブラリの選択
  5. 外部ライブラリを使う場合のライブラリURL入力欄
  6. 元記事のタイトルとURL入力欄

ここで作るCSS/Javascriptのフィールドに入力されたものはヘッダーに記述することになります。
特にヘッダーじゃなくても構わないんですけど、今回はヘッダーということでお願いします。

01 : テンプレートタイトル・テンプレートインストラクションの入力

基本設定となる部分のタイトルとその説明です。

[1] テンプレートタイトル:
今回はカスタムフィールドのボックスタイトルをテンプレートタイトルで置き換えるため入力をしておきます。

[2] テンプレートインストラクション:
必要なければ記入しなくても大丈夫です。複数人で使う場合や自分が忘れっぽいと思う人とかなら使ったほうがいいかもしれません。

テンプレートインストラクションの入力項目にはHTMLタグが使用できます。
改行をしたい場合や強調をしたい場合、またマニュアルページやその他のへのリンクを貼りたい場合等はタグの入力をしてください。

テンプレートタイトル・テンプレートインストラクションはどちらもわかりやすいタイトル・文章にしましょう。

02 : 投稿タイプとカスタムポストタイプを選ぶ

ここを設定することで、そのカスタムフィールドのボックスをどの投稿画面に出すのかを指定することができます。

[3] 投稿ポスト:
カスタムポストを指定するのでぶっちゃけどっちでもいいので放置です。
カテゴリー指定や投稿IDの直接指定をする方も同様。

ただし「ワシは投稿でのみ使うんじゃい!」とか「おいどんは固定ページを量産してそこにデモつくるたい!」という方は、それぞれに合った投稿ポストの指定をしましょう。
たぶん固定ページに作るのはそんなに需要無いです。

[4] カスタムポストタイプ(カンマ区切り):
今回はここでカスタム投稿タイプでデモ専用の投稿エリアを作るで作ったカスタム投稿タイプのスラッグ「demo」を入力します。

Post ID (カンマ区切り)は指定する投稿や固定ページがある場合、カテゴリーID (カンマ区切り)は特定のカテゴリで使用する場合に使ってください。
個別ページごと・カテゴリごとに別テンプレートを使う人とかが該当します。

ページテンプレートファイル名 (カンマ区切り)に関しては…使う予定もないしいまいちよくわからないので分かる人に聞いたらいいと思います!
たぶん特定の名前のついたテンプレートに対して出力するんだよね?

03:入力項目を設定する

次はいよいよ入力フィールドを生成する項目です。

どのような入力項目でどの場所に表示するかを予測しながら作ります。
予測するのが難しい方もいるかと思いますので、最終的にどういう表示にしたいかをワイヤーフレームや静的HTMLで作ってみてからでもいいかもしれません。

とりあえず下記のような感じで入力項目を作ってみました。

[5] テンプレートコンテンツ:

[h2_discription]
type = textarea
rows = 3
cols = 100
label = デモページの説明を入力

[input_css]
type = textarea
rows = 7
cols = 100
label = ヘッダー用CSS
mediaButton = true

[input_js]
type = textarea
rows = 7
cols = 100
label = ヘッダー用Javascript
mediaButton = true

[library_fieldset]
type = fieldset_open
legend = 使用するライブラリ

[select_library]
type = radio
value = 使用しない # jQuery 最新版 # jQuery ver.1.7.2 # jQuery ver.1.5.2 # jQuery ver.1.3.2 # prototype # MooTools
default = 使用しない
label = インストール済みのライブラリ

[input_library]
type = text
size = 80
label = インストールしていないデモ用ライブラリの専用パス

[check_library]
type = checkbox
value =  入力したライブラリを優先的に使う(チェックされているとき)
label = 入力したライブラリの使用可否

[library_fieldset]
type =fieldset_close

[link_fieldset]
type = fieldset_open
legend = 元記事へのリンク

[link_title]
type = text
size = 80
label = リンク先のタイトル

[link_url]
type = text
size = 80
label = リンクURL

[link_blank]
type = checkbox
value =別窓で開く(チェックされているとき)
default = 別窓で開く(チェックされているとき)
label = 別窓設定

[link_fieldset]
type = fieldset_close

[robot_access]
type = checkbox
value =  このページをクローラーに収集させない(チェックされているとき)
label = クローラー対策

01・07・14行目
「h2_discription / input_css / input_js」に関しては説明するまでも無いですので省略します。
「mediaButton = true」はCSSの背景とかjsのパス指定で入力するかもしれないので、パスのコピー用に一応つけておきました。
さらに説明が必要ならコメントください。

21・41行目
「library_fieldset」に「type = fieldset_open」と「type = fieldset_close」をつけることでグループ化して、その中に使用するライブラリをどう選択するかを記述します。

25行目
あらかじめテーマの中にインストールしたライブラリを「select_library」にリストとして追加していきます。
ライブラリのファイル名を変えればのバージョンごとの管理もできるので、特定のバージョンで動作する場合のデモで有効です。

「select_library」に新たにライブラリの選択肢を追加する場合はこの設定での選択肢と、後で作成するテンプレートに条件分岐でライブラリのパスを追加記述しなければなりません。

cft and cftsearch Shortcode Formatの項目でまとめて書いておいてショートコード出力でテンプレートに記述することも可能ですが、今回はやりません。

なお、インストールしているライブラリがない場合や外部サイトのライブラリを固定で使う、または入力フィールドに律儀にパスを書く場合は「select_library」の項目自体削除して構いません。

31・36行目
「input_library」には外部サイトのライブラリのパスやひとつひとつインストールして律儀に使う人が書いたらいいかと思います。
また「check_library」でチェックボックスで使用可否を選択することにより、テンプレート内の条件分岐で優先的に入力フォームに入れたライブラリを読みこませることが可能です。

44・64行目
21・41行目と同じく「link_fieldset」でグループ化します。

48・53・58行目
元記事のリンク先とタイトル、別窓で開くかどうかの選択をします。
元記事のリンクが必要なのは検索エンジン等から直接そのページを訪問した場合の誘導のためです。
別窓の設定は、デフォルトで「target=”_blank”」をつけておくように「default=チェックボックスのラベル」をつけておきます。

67行目
これはおまけ程度につけたんですけど、検索エンジンのクローラーに収集させるかさせないか選べるようにします。
チェックを入れているか否かで「index,follow」と「noindex,nofollow」の条件分岐をさせます。
デフォルトでは公開するように設定してしててもいいかと思います。

各種設定をする – グローバル設定編

とりあえずチェックする項目だけ挙げておきます。

  • カスタムフィールドのキーの代わりにラベルを使用する
  • 初期化ボタンを無効にする
  • 保存ボタンを無効にする
  • デフォルトのカスタムフィールドを無効にする
  • クイック編集を無効にする
  • カスタムフィールドカラムを無効にする(クイック編集も動きません)
  • ボックスタイトルを置き換える
  • jQuery バリデーションを使用する

ちょっと必要ないものもチェックしちゃいましたがまあ大丈夫でしょう。
全部が必須ではないので、このへんは任意で設定してください。

「テンプレートごとにボックスを配置する」は同じ投稿画面に対して複数のカスタムフィールドのボックスがある場合に有効です。
今回は同じ投稿画面に対して複数設置しないのでチェックは入れませんでした。
あとフィールドに必須項目がないので、jQueryバリデーションはいらないかもしれません。

実際に投稿する際の入力画面はこうなります。

[ 目次へ戻る ]

カスタムフィールドを出力するテンプレートを作成する

さて、いよいよ投稿でカスタムフィールドに入力したものを出力します。

専用のテンプレートを用意します。
テンプレートのファイル名は「single-カスタムポスト名.php」として保存してください。
カテゴリーの場合は「category-カテゴリースラッグ名.php」として保存してください。
固定ページの場合は「page-ページスラッグ名.php」として保存してください。

さてテンプレートの中身なのですが、今回はヘッダーとフッターを分割して読み込ませることにします。
ヘッダーやフッターを使いまわす場合等で便利です。

デモ用ヘッダー:header-demo.php

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8" />

<title><?php wp_title(''); ?> | <?php bloginfo('name'); ?></title>

<meta name="keywords" content="">
<meta name="description" content="<?php echo post_custom('h2_discription'); ?>">

<?php if (post_custom('robot_access')): ?>
<meta name="robots" content="noindex,nofollow">
<?php else : ?>
<meta name="robots" content="index,follow">
<?php endif; ?>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/demo.css">

<?php if (post_custom('input_css')): ?>
<style type="text/css">
<?php echo post_custom('input_css'); ?>
</style>
<?php endif; ?>

<?php if (post_custom('check_library')): ?>
<script type="text/javascript" src="<?php echo post_custom('input_library'); ?>"></script>
<?php else: ?>
     <?php if(get_post_meta($post->ID,'select_library',true) == 'jQuery 最新版'): ?>
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
     <?php elseif(get_post_meta($post->ID,'select_library',true) == 'jQuery ver.1.7.2'): ?>
     <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/lib/demo/jquery-1.7.2.min.js"></script>
     <?php elseif(get_post_meta($post->ID,'select_library',true) == 'jQuery ver.1.5.2'): ?>
     <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/lib/demo/jquery-1.5.2.min.js"></script>
     <?php elseif(get_post_meta($post->ID,'select_library',true) == 'jQuery ver.1.3.2'): ?>
     <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/lib/demo/jquery-1.3.2.min.js"></script>
     <?php elseif(get_post_meta($post->ID,'select_library',true) == 'prototype'): ?>
     <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/lib/demo/prototype.js"></script>
     <?php elseif(get_post_meta($post->ID,'select_library',true) == 'MooTools'): ?>
     <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/lib/demo/mootools.js"></script>
     <?php endif;?>
<?php endif;?>

<?php if (post_custom('input_js')): ?>
<script type="text/javascript">
<?php echo post_custom('input_js'); ?>
</script>
<?php endif; ?>

<?php wp_head(); ?>
</head>

<body id="demo">
<div id="top" class="wrap">

     <header id="head" class="clr">
          <div class="site_title"><a href="/"><?php bloginfo('name'); ?></a></div>
          <div class="description"><?php bloginfo('description'); ?></div>
     </header>

     <section id="contents">

基本的にはpost_customでキーを指定して、フィールドに入力された項目を出力します。
さらにpost_customを使った条件分岐をすることでフィールドに値が入っているか居ないかを判別して、値が入っていない場合は要素ごと出力させないようにします。

ちょっと特殊というかわかりにくいのが26行目から40行目のハイライトしているところです。
ここでカスタムフィールドの入力項目を設定で指定したラジオボタンとチェックボックスが生きてきます。

入力したライブラリを優先的に使うのチェックボックスにチェックしている場合、入力したURLの値が入ってるとそのライブラリまでのパスが出力されます。

入力したライブラリを優先的に使うのチェックボックスにチェックしていない場合、ラジオボタンで選択したフィールドの値にしたがってそれぞれインストールされているライブラリのパスを出力します。
「使用しない」を選択している場合は出力されません。

「wp_head();」を書いているため、WordPressのデフォルトで出力されるjQueryを出力してしまいます。
そのため、ほかのライブラリとぶつかってしまのを防ぐ必要があります。

その場合のためにおまけ:WordPressがデフォルトで出力するライブラリとぶつからないようにするの項で対策案を出しておこうと思います。

デモ用コンテンツ部:single-demo.php / category-demo.php / page-demo.php

<?php get_header('demo'); ?>

          <hgroup>
               <h1><?php wp_title(''); ?></h1>
               <h2><?php echo post_custom('h2_discription'); ?></h2>
          </hgroup>

          <?php if (post_custom('link_url')): ?>
          <aside id="linkArea">
               <div class="inner">
                    元記事:
                    <a href="<?php echo post_custom('link_url'); ?>"<?php if (post_custom('link_blank')): ?> target="_blank"<?php endif; ?>>
                         <?php if (post_custom('link_title')): ?>
                         <?php echo post_custom('link_title'); ?>
                         <?php else: ?>
                         <?php echo post_custom('link_url'); ?>
                         <?php endif; ?>
                    </a>
               </div>
          </aside>
          <?php endif; ?>

          <article id="postBody">

               <?php if(have_posts()): ?>
               <?php while(have_posts()):the_post(); ?>
               <?php the_content(); ?>
               <?php endwhile; ?>
               <?php endif; ?>

          </article>

          <?php if (post_custom('link_url')): ?>
          <aside id="linkArea">
               <div class="inner">
                    元記事:
                    <a href="<?php echo post_custom('link_url'); ?>"<?php if (post_custom('link_blank')): ?> target="_blank"<?php endif; ?>>
                         <?php if (post_custom('link_title')): ?>
                         <?php echo post_custom('link_title'); ?>
                         <?php else: ?>
                         <?php echo post_custom('link_url'); ?>
                         <?php endif; ?>
                    </a>
               </div>
          </aside>
          <?php endif; ?>

<?php get_footer('demo'); ?>

元記事のリンクの出力の仕方がちょっとややこしいのですが、条件分岐としては単純です。

リンクURLが未入力の場合は要素ごと出力しない。
要素が出力された場合で、リンク先のタイトルが未入力の場合、テキストで出力する箇所をリンクURLに置き換える。

それから「get_header(‘demo’);」と「get_footer(‘demo’);」ですが、この「demo」の部分に通常のヘッダー/フッターではなく「header-demo.php / footer-demo.php」を読みこませるようにしています。

「header-◯◯◯.php / footer-◯◯◯.php」の◯◯◯部分に任意で対応させたい文字を入れ「get_header(‘◯◯◯);」と「get_footer(‘◯◯◯’);」に入れればOKです。

デモ用フッター:footer-demo.php

     </section>

     <footer>

          <div id="copyright">
               ここに書いてある情報は、特に断り書きがない限り、自由に使ってください(コピー、改変を含む)。 転載先においても転載自由にしてかまいません。
          </div>
     </footer>

</div>
<?php wp_footer(); ?>
</body>

</html>

Syntaxhighlighterを併用するため「wp_footer();」はなるべく合ったほうがいいです。
Syntaxhighlighterを使用しないなら、この限りではありません。

[ 目次へ戻る ]

おまけ:WordPressがデフォルトで出力するライブラリとぶつからないようにする

カスタムフィールドのキーを埋め込むの項でヘッダーに「wp_head()」があるものを使う場合、jQueryと他のライブラリとぶつかる、またはjQueryが動かないという可能性があります。

テンプレートの「wp_head();」の位置によってぶつかるかどうかも決まってくるので、
「$」を「jQuery」に置き換えるのも「$function($){」の記述をするのもなんだか面倒です。

ですので、今回はWordPressに標準でインストールされているものを読み込ませないようにします。

デフォルトで指定されるjQueryを取り除く

wp_deregister_script('jquery');

これをfunctions.phpに書くのですが、これだと管理画面に使われているjQueryまで読み込ませない様になってしまうので、条件を追加します。

【管理画面以外で】デフォルトで指定されるjQueryを取り除く

if(!is_admin()) wp_deregister_script('jquery');

これでWordPressデフォルトのjQueryが読み込まなくなりました。

補足ですが、jQueryだけ使うならカスタムフィールドテンプレートの該当部分とテンプレートPHPの条件分岐を削除するだけで、後は何もしなくてもいいです。

それだとnoConflictが動いて、結局通常の描き方ができない!ということもありますので、functions.phpに下記をを追加する方法もいいかもしれません。

デフォルトで指定されるjQueryを取り除いてGoogle APIから読み込む

wp_deregister_script('jquery');
wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');

[ 目次へ戻る ]

おわりに

そんなこんなで解説してきましたけど、結果はご覧の有様だよ!!!

動作デモ用完成ページ


ぼくのかんがえたさいきょうの動作デモページ

まとめ

  • カスタム投稿ポストで専用の投稿フォームをつくると後でまとめとか作りやすい(かも)
  • カスタムフィールドテンプレートで大体のことはできる
  • ただ出力するだけじゃなくて条件分岐を駆使すると柔軟性があがる
  • 説明にすごく疲れた

普通に投稿エリアに書いてもいいんだけど、そうするとけっこう記事に書いたコードがわかりにくくなってしまいます。
個人的に動かすスクリプトやコードと記事をちゃんと分けたかったというのが本音です。

もちろん少ないコードの場合だと動作デモページを作るまでもないですので、僕は特定カテゴリー専用でCSSとJavascriptだけを記述するカスタムフィールドを、動作デモとは別に作成して運用しています。

人間は楽して生きたい生物なんですけど、楽するためには苦労がつきものというわけですハイ。

書いているうちに、ほぼカスタムフィールドテンプレートの使い方講座みたいになっていました。
だいたいコピペしたら出来るかと思いますので、あとはデザイナーさんならHTMLとかCSSとかいじって好きなレイアウトやデザインで作ることができますね。

本当はもっと楽な方法があるんでしょうけど、とりあえずこれで勘弁して下さい。

もし「もっといい方法あるよ」とか「動かなねえよゴルァ!」とか「表示されない\(^o^)/オワタ」とかあったらコメントでもTwitterとかFacebookで教えてください!

動かない・出力されない系のやつは環境と実際の状況を明記していただけると解決が早いかもです。

紹介したものをあらためて

Custom Post Type UI
http://wordpress.org/extend/plugins/custom-post-type-ui/

Custom Field Template Plugin

WordPress界のみなさまみんなすごいんですもの。良記事いっぱいあって助かります。

それでは皆様よいWordPressライフを!

[ 目次へ戻る ]

「今度この内容でぜひ喋ってください!」とかあったらいいのに…(遠い目)。

TO PAGE TOP