cmsで利用できるようなテンプレートファイルに編集し、最終的には1つのオリジナルテーマを作成していきます。使用して説明しておりますが、以下のフォームから実際に作業をするサーバーのURLを入れていただく事で、文中のテキストを希望のURLに書き換えることができます。変更カスタムフィールドとは管理画面上に標準で用意されている入力欄ではなく、カスタマイズする人が欲しい追加された入力欄のことです。カスタムフィールドの種類と、そのテンプレートのファイルの置き場は以下のようになります。用意するのですが、入力ミスで動作しなくなることから「カスタムフィールドメーカー」というツールが管理ページやデベロッパーサイト上で提供されています。developerカスタムフィールドメーカーとは、ラベルや値、サイズなど入力していきカスタムフィールドのHTMLが生成する便利なツールです。カスタムフィールドメーカーでは、テキストや画像などさまざま...ヘッダー・フッターの編集用の管理画面の作成カスタムフィールドの基礎の紹介が終わったので、ここからテンプーレートを実装を進めます。このヘッダー・フッター部分は、サイト全体どこでも利用するデータということになりますので、ブログのカスタムフィールドを利用します。ヘッダー部分は、アイコンとタイトルを編集可能にします。SNSアイコンのリンク先を設定したり、使わないものは消したりできるようにしてみます。ファイルを作成する必要があります。その後、カスタムフィールドメーカーを利用して以下の情報から管理画面のフォームのHTMLを作成します。style="display:none">許可されていないファイルのため挿入できません。入力欄が表示されます。ここまで作ると、やっとテンプレート側の実装になります。管理画面が出来上がると、次はそのデータを表示できるようにします。今回はブログのカスタムフィールドを表示させます。表示にはブログフィールドを利用します。制作者側で用意していますので、中身は空っぽになっています。</div></div>表示用のコードについても、カスタムフィールドメーカーの表示用ソースを参考に、以下のように書き換えます。-->IFブロックを利用して条件分岐の設定をする先ほど最低限の実装を済ませましたが、もう少ししっかり作り込みを行います。データがある時に出すのは当たり前ではありますが、無い時にどうするのかも大事です。残ってしまうことになります。IFブロックを利用するとテンプレートに条件分岐を設定できます。</div></div>フッターの表示側の実装ヘッダーと同じようにフッター部分も実装をしていきます。複数あったとして、何も編集されなかったら、囲まれているエリアは無かったことにできるというブロックです。</div></div>以下のような実装になりました。無くなるように設定しています。いうものも用意しました。囲むとレイアウトがズレる可能性があるので残すようにしています。ヘッダー部分の仕上げを行います。現状は、カテゴリー名と書かれていますが、それぞれのカテゴリー名が編集されるようにします。黒い部分には背景画像を設定し、「カテゴリーの説明文が書かれます。」の部分も編集可能にします。class="page-description">カテゴリーの説明文が書かれます。グローバル変数を利用すると、簡単にカテゴリー名が設定できます。ように中括弧の前にパーセントがついています。どのようなグローバル変数があるのかは、デベロッパーサイトのドキュメントのグローバル変数をご覧ください。developerグローバル変数は、テンプレートに記述することで、表示中のページが持つ情報を出力します。テンプレート上、モジュールやインクルードよりも先に処理されます。書いてありましたが、カテゴリー毎に変わっているところで確認してもらった方が分かりやすいかと説明しないでいました。class="page-description">カテゴリーの説明文が書かれます。表示させると「お知らせ」や「採用情報」という表示が出るようになります。次に、背景画像と説明文はカテゴリーのカスタムフィールドを利用します。項目としては以下のような項目になりますので、カスタムフィールドメーカーを利用し管理画面のフォームのHTMLを作成します。style="display:none">許可されていないファイルのため挿入できません。確認してみると、入力欄が表示されます。カテゴリーカスタムフィールド表示側の実装ブログのカスタムフィールドで行った事の繰り返しになりますが、今回はカテゴリーになりますので、利用するモジュールはカテゴリーフィールドを利用します。見ないで、実装が完了したら答え合わせにご利用ください。いう記述が見つかります。{変数}の値を利用し情報を編集するようなプログラムを実行することができます。developer{var}[option]というように、変数の後に[]を記述して校正オプションを使用します。使用して複数指定することもできます。置き換える処理を行います。以下のような表示となります。まとめ今回はカスタムフィールドを中心に、テンプレートで使う機能を紹介しました。校正オプションの利用それらしくなってきましたが、まだまだな部分もあります。