Article俺流の!WordPressで動作デモのページを作るチュートリアルこの記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それ以外の場合はどうぞこの記事をお楽しみください。HTMLやCSS、Javascriptの動作を紹介するときにたまに必要な「動作デモ」や「コードスニペット」のページ。WordPressでやる場合に「普通にカスタムポスト作って投稿エリアに書いたらいいやん」と思うんですけど、できれば楽して作りたい。いうわけで、僕が以前使っていた動作デモページの作り方、教えます。WordPressで情報発信したいけど面倒だっていうグータラな初心者向けデザイナー向けだよ。PHPには今回対応しません。何らかの方法でできるかとは思います。え、知ってるしとっくにやってる?そこヤジ飛ばさないで最後までみておくんなまし><!本当は自分で振っておいて誘導尋問的にリクエスト受けたんですけどね。あると思います!私も最初コードを説明してるブログからコピペでテーマ作ってましたから!今もですけど...(。2012というわけで、「以前運営して今は放置してそろそろこっちに統合しようかと思っている忘備録Tipsブログ」を作った時に使ったテクニックを紹介するよ!もうこのブログでも同じ構成にしてるから、忘備録Tipsブログの方はいつ閉鎖してもいいね!やったね!もくじはじめに入力する項目を決め、何が必要となるのか見極めるワイヤーフレームを書いたり静的HTMLで組んだりするカスタム投稿タイプでデモ専用の投稿エリアを作るカスタムフィールドテンプレートでスクリプト用のフィールドを作るカスタムフィールドを出力するテンプレートを作成するおまけ:WordPressがデフォルトで出力するライブラリとぶつからないようにするおわりにはじめにこの記事では以下のことを前提としてお話します。JSFIDDLEやjsdo.it等のコード投稿・共有サイトを使わないテンプレートにJavascriptやその他ライブラリを使わない(動作させるコードに対するライブラリは後入れ)1つのページにつき1つのライブラリしかつかわないWordPressプラグインは使いますWordPressのバージョンは3.2以上でしか試していません。僕が使ってたってだけだからね。参考程度にしてくれればいいと思う。後ろ向き発言バンザイ!\(^o^)/あと、完成形はこんな感じです。]入力する項目を決め、何が必要となるのか見極める今回はHTMLに対してCSSとJavascriptでゴニョゴニョするいつものやつを作ります。動作サンプルとして他のライブラリやスクリプトと競合しないページを作りたいので独自テンプレートを用意しなくてはなりません。動作デモを随時修正したい場合とかにカスタム投稿ポストをつくって専用の投稿エリアを作ってもいいですし、カテゴリで済ますという手もあります。今回はカスタム投稿ポストを使ってみることにします。次に、なるべく投稿エリアでHTMLタグを使って整形させたくないので、入力フィールドを独自で用意して、その部分をまとめて埋め込むのが理想でしょうか。今回の入力項目として必須なのは以下のとおり。上記ができるのって、やっぱりカスタムフィールドですよね。いうわけで凡庸に使える「カスタムフィールドテンプレート」を使用してこれらを実現しようと思います。]ワイヤーフレームを書いたり静的HTMLで組んだりする先ほど必須項目として挙げたものをもとに簡単にワイヤーフレームを作ったり、それを元に軽くコーディングしたりします。今回はワイヤーフレームなしでいきなりコーディングしちゃっています。HTML/CSSは以下のようにしました。HTMLハイライトされている部分がカスタムフィールドで入力したもので置き換えたり条件分岐で出力するものを変えたりループ部分になったりするところです。ここに書いてある情報は、特に断り書きがない限り、自由に使ってください(コピー、改変を含む)。転載先においても転載自由にしてかまいません。</footer></div></body></html>\超シンプル/必要最低限出力する箇所があれば、自由にマークアップしちゃってください。デモのコードと鑑賞しないように最小限のid,class名をつけてあげるといいです。ユニークなid,classを作って逐一指定していくという手もありますね。フッターはコピーライトとか記述してください。面倒なら記述しなくてもいいです。CSSコードが超長いので折りたたんでいます。見たいorコピーしたい方は以下の「ソースを見る」をクリックして展開してください。11px;}HTMLのマークアップに添って、CSSも最低限のデザインを保つくらいでいいです。CSSを当てるなら、h1〜h3、blockquoteとかリストタグとかのスタイルは欲しいかな。リセット関係のやつも好きなのを使ったらいいと思います。デモ用のCSSと干渉する可能性もあるので、CSSはなくてもいいくらいです。]カスタム投稿タイプでデモ専用の投稿エリアを作るカテゴリで分けるよという人は飛ばしても問題無いです上記のようなデモページ専用の投稿エリアを作ります。funcitons.phpに以下に記述するコードを直接書いてもいいですし、記述したものを分割して別ディレクトリに入れてインクルードするでもいいです。基本的には後者おすすめ。'custom_post_type_demo');今回はめんどくさいのでこんな感じで記述を追加します。ハイライト部分の「demo」とか「動作デモ」とかを任意の単語に変えてください。間違ってるかもなんでご指摘あればコメントにてお願いします。他にも投稿したメッセージとかタクソノミーとか色々変更できるのですが、必要に応じて追記してください。以下の記事がとても参考になります。後半のカスタム投稿タイプ以降が該当します。カスタムフィールドやアイキャッチを使えるようにするTipsもあったりして親切。今回は使わないけどね。カスタム投稿だからってカスタムし過ぎなくらいカスタムしてます。今回は使わないけどね。俺、たぶんここのサイト参考にしてる。UIhttp://wordpress.org/extend/plugins/custom-post-type-ui/今回は例によって使いませんが、使って損することはないですので。カスタム投稿タイプを作成したら、投稿タイプのスラッグ(今回の場合「demo」)を覚えておきましょう。カスタムフィールドテンプレートの設定で使います。カスタムポストタイプ以外でデモページを作る人は、カテゴリーIDとか覚えていれば大丈夫です。]カスタムフィールドテンプレートでスクリプト用のフィールドを作るさてここからが本番です。入力を楽をするためにカスタムフィールドをいじります。Template」です。Plugin本家サイトの紹介:http://wpgogo.com/development/custom-field-template.html公式リポジトリ:http://wordpress.org/extend/plugins/custom-field-template/公式マニュアルサイト:http://ja.wpcft.com/いつの間にかマニュアルサイトとかできてたんですね。今回の記事書くときに初めて知りました。すべてを観覧するにはマニュアル権を購入する必要があるようですので、どうしても必要な方は購入してはどうでしょうか(販売貢献)。インストールして有効化したら、投稿画面に出力するフィールドの設定をします。各項目のスクリーンショットにあるように、まずは上から順番に入力項目を埋めていきます。必要ない部分は省いていますのでここで記入していない部分で必要な部分がありましたら各自埋めていってください。入力項目設定編まずは基本設定となる部分のカスタムフィールドを作成します。入力する項目を決め、何が必要となるのか見極めるの項目でも挙げた、以下の6点の設定です。元記事のタイトルとURL入力欄ここで作るCSS/Javascriptのフィールドに入力されたものはヘッダーに記述することになります。ヘッダーじゃなくても構わないんですけど、今回はヘッダーということでお願いします。基本設定となる部分のタイトルとその説明です。テンプレートタイトル:今回はカスタムフィールドのボックスタイトルをテンプレートタイトルで置き換えるため入力をしておきます。テンプレートインストラクション:必要なければ記入しなくても大丈夫です。複数人で使う場合や自分が忘れっぽいと思う人とかなら使ったほうがいいかもしれません。テンプレートインストラクションの入力項目にはHTMLタグが使用できます。改行をしたい場合や強調をしたい場合、またマニュアルページやその他のへのリンクを貼りたい場合等はタグの入力をしてください。テンプレートタイトル・テンプレートインストラクションはどちらもわかりやすいタイトル・文章にしましょう。投稿タイプとカスタムポストタイプを選ぶここを設定することで、そのカスタムフィールドのボックスをどの投稿画面に出すのかを指定することができます。投稿ポスト:カスタムポストを指定するのでぶっちゃけどっちでもいいので放置です。カテゴリー指定や投稿IDの直接指定をする方も同様。「ワシは投稿でのみ使うんじゃい!」とか「おいどんは固定ページを量産してそこにデモつくるたい!」という方は、それぞれに合った投稿ポストの指定をしましょう。固定ページに作るのはそんなに需要無いです。カスタムポストタイプ(カンマ区切り):今回はここでカスタム投稿タイプでデモ専用の投稿エリアを作るで作ったカスタム投稿タイプのスラッグ「demo」を入力します。(カンマ区切り)は特定のカテゴリで使用する場合に使ってください。個別ページごと・カテゴリごとに別テンプレートを使う人とかが該当します。(カンマ区切り)に関しては...使う予定もないしいまいちよくわからないので分かる人に聞いたらいいと思います!たぶん特定の名前のついたテンプレートに対して出力するんだよね?03:入力項目を設定する次はいよいよ入力フィールドを生成する項目です。どのような入力項目でどの場所に表示するかを予測しながら作ります。予測するのが難しい方もいるかと思いますので、最終的にどういう表示にしたいかをワイヤーフレームや静的HTMLで作ってみてからでもいいかもしれません。下記のような感じで入力項目を作ってみました。input_js」に関しては説明するまでも無いですので省略します。true」はCSSの背景とかjsのパス指定で入力するかもしれないので、パスのコピー用に一応つけておきました。説明が必要ならコメントください。fieldset_close」をつけることでグループ化して、その中に使用するライブラリをどう選択するかを記述します。25行目あらかじめテーマの中にインストールしたライブラリを「select_library」にリストとして追加していきます。ライブラリのファイル名を変えればのバージョンごとの管理もできるので、特定のバージョンで動作する場合のデモで有効です。「select_library」に新たにライブラリの選択肢を追加する場合はこの設定での選択肢と、後で作成するテンプレートに条件分岐でライブラリのパスを追加記述しなければなりません。Formatの項目でまとめて書いておいてショートコード出力でテンプレートに記述することも可能ですが、今回はやりません。インストールしているライブラリがない場合や外部サイトのライブラリを固定で使う、または入力フィールドに律儀にパスを書く場合は「select_library」の項目自体削除して構いません。「input_library」には外部サイトのライブラリのパスやひとつひとつインストールして律儀に使う人が書いたらいいかと思います。「check_library」でチェックボックスで使用可否を選択することにより、テンプレート内の条件分岐で優先的に入力フォームに入れたライブラリを読みこませることが可能です。44・64行目21・41行目と同じく「link_fieldset」でグループ化します。元記事のリンク先とタイトル、別窓で開くかどうかの選択をします。元記事のリンクが必要なのは検索エンジン等から直接そのページを訪問した場合の誘導のためです。別窓の設定は、デフォルトで「target=”_blank”」をつけておくように「default=チェックボックスのラベル」をつけておきます。67行目これはおまけ程度につけたんですけど、検索エンジンのクローラーに収集させるかさせないか選べるようにします。チェックを入れているか否かで「index,follow」と「noindex,nofollow」の条件分岐をさせます。デフォルトでは公開するように設定してしててもいいかと思います。グローバル設定編とりあえずチェックする項目だけ挙げておきます。バリデーションを使用するちょっと必要ないものもチェックしちゃいましたがまあ大丈夫でしょう。全部が必須ではないので、このへんは任意で設定してください。「テンプレートごとにボックスを配置する」は同じ投稿画面に対して複数のカスタムフィールドのボックスがある場合に有効です。今回は同じ投稿画面に対して複数設置しないのでチェックは入れませんでした。あとフィールドに必須項目がないので、jQueryバリデーションはいらないかもしれません。実際に投稿する際の入力画面はこうなります。]カスタムフィールドを出力するテンプレートを作成するさて、いよいよ投稿でカスタムフィールドに入力したものを出力します。専用のテンプレートを用意します。テンプレートのファイル名は「single-カスタムポスト名.php」として保存してください。カテゴリーの場合は「category-カテゴリースラッグ名.php」として保存してください。固定ページの場合は「page-ページスラッグ名.php」として保存してください。テンプレートの中身なのですが、今回はヘッダーとフッターを分割して読み込ませることにします。ヘッダーやフッターを使いまわす場合等で便利です。id="contents">基本的にはpost_customでキーを指定して、フィールドに入力された項目を出力します。post_customを使った条件分岐をすることでフィールドに値が入っているか居ないかを判別して、値が入っていない場合は要素ごと出力させないようにします。特殊というかわかりにくいのが26行目から40行目のハイライトしているところです。ここでカスタムフィールドの入力項目を設定で指定したラジオボタンとチェックボックスが生きてきます。入力したライブラリを優先的に使うのチェックボックスにチェックしている場合、入力したURLの値が入ってるとそのライブラリまでのパスが出力されます。入力したライブラリを優先的に使うのチェックボックスにチェックしていない場合、ラジオボタンで選択したフィールドの値にしたがってそれぞれインストールされているライブラリのパスを出力します。「使用しない」を選択している場合は出力されません。「wp_head();」を書いているため、WordPressのデフォルトで出力されるjQueryを出力してしまいます。そのため、ほかのライブラリとぶつかってしまのを防ぐ必要があります。その場合のためにおまけ:WordPressがデフォルトで出力するライブラリとぶつからないようにするの項で対策案を出しておこうと思います。?>元記事のリンクの出力の仕方がちょっとややこしいのですが、条件分岐としては単純です。リンクURLが未入力の場合は要素ごと出力しない。要素が出力された場合で、リンク先のタイトルが未入力の場合、テキストで出力する箇所をリンクURLに置き換える。footer-demo.php」を読みこませるようにしています。footer-◯◯◯.php」の◯◯◯部分に任意で対応させたい文字を入れ「get_header(‘◯◯◯);」と「get_footer(‘◯◯◯’);」に入れればOKです。ここに書いてある情報は、特に断り書きがない限り、自由に使ってください(コピー、改変を含む)。転載先においても転載自由にしてかまいません。?></body></html>Syntaxhighlighterを併用するため「wp_footer();」はなるべく合ったほうがいいです。Syntaxhighlighterを使用しないなら、この限りではありません。]おまけ:WordPressがデフォルトで出力するライブラリとぶつからないようにするカスタムフィールドのキーを埋め込むの項でヘッダーに「wp_head()」があるものを使う場合、jQueryと他のライブラリとぶつかる、またはjQueryが動かないという可能性があります。「$」を「jQuery」に置き換えるのも「$function($){」の記述をするのもなんだか面倒です。今回はWordPressに標準でインストールされているものを読み込ませないようにします。デフォルトで指定されるjQueryを取り除くwp_deregister_script('jquery');これをfunctions.phpに書くのですが、これだと管理画面に使われているjQueryまで読み込ませない様になってしまうので、条件を追加します。wp_deregister_script('jquery');これでWordPressデフォルトのjQueryが読み込まなくなりました。補足ですが、jQueryだけ使うならカスタムフィールドテンプレートの該当部分とテンプレートPHPの条件分岐を削除するだけで、後は何もしなくてもいいです。それだとnoConflictが動いて、結局通常の描き方ができない!ということもありますので、functions.phpに下記をを追加する方法もいいかもしれません。]おわりにそんなこんなで解説してきましたけど、結果はご覧の有様だよ!!!動作デモ用完成ページぼくのかんがえたさいきょうの動作デモページまとめカスタム投稿ポストで専用の投稿フォームをつくると後でまとめとか作りやすい(かも)カスタムフィールドテンプレートで大体のことはできるただ出力するだけじゃなくて条件分岐を駆使すると柔軟性があがる説明にすごく疲れた普通に投稿エリアに書いてもいいんだけど、そうするとけっこう記事に書いたコードがわかりにくくなってしまいます。個人的に動かすスクリプトやコードと記事をちゃんと分けたかったというのが本音です。少ないコードの場合だと動作デモページを作るまでもないですので、僕は特定カテゴリー専用でCSSとJavascriptだけを記述するカスタムフィールドを、動作デモとは別に作成して運用しています。人間は楽して生きたい生物なんですけど、楽するためには苦労がつきものというわけですハイ。書いているうちに、ほぼカスタムフィールドテンプレートの使い方講座みたいになっていました。だいたいコピペしたら出来るかと思いますので、あとはデザイナーさんならHTMLとかCSSとかいじって好きなレイアウトやデザインで作ることができますね。本当はもっと楽な方法があるんでしょうけど、とりあえずこれで勘弁して下さい。「もっといい方法あるよ」とか「動かなねえよゴルァ!」とか「表示されない\(^o^)/オワタ」とかあったらコメントでもTwitterとかFacebookで教えてください!動かない・出力されない系のやつは環境と実際の状況を明記していただけると解決が早いかもです。Plugin本家サイトの紹介:http://wpgogo.com/development/custom-field-template.html公式リポジトリ:http://wordpress.org/extend/plugins/custom-field-template/公式マニュアルサイト:http://ja.wpcft.com/WordPress界のみなさまみんなすごいんですもの。良記事いっぱいあって助かります。]「今度この内容でぜひ喋ってください!」とかあったらいいのに...(遠い目)。コメントは受け付けていません。