新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

カスタムフィールドとカスタム投稿で記事投稿フォームを使いやすく 3 – テンプレート編集の巻 【ワードプレス】 #wp

      2014/11/09

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

さて、入力側のインターフェースが整ったところで、今度は出力側の設定をしておきましょう。
カスタム投稿(カスタムポスト)を使って投稿された記事はなにも設定しないと「single.php」(ブログ記事一つのテンプレート)にのっとって表示されます。
これを、専用のテンプレートで表示させるためには、今回作ったカスタム投稿タイプが「shops」なので、「single-shops.php」というテンプレートを用意する必要があります。
つまり「single-カスタム投稿タイプ名(英字).php」というテンプレートを用意すればいいのです。
そしてそこに、カスタムフィールドの要素も付け加えてレイアウトしてあげます。

スポンサーリンク
 

以下具体的な手順です。

  1. まずはサーバーから該当のテーマフォルダ内の「single.php」をダウンロードして「single-shop.php」(カスタム投稿タイプが「shops」の場合)に改名、同じ場所にアップする。
    テンプレートのベースを作る
  2. ダッシュボードから「外観」→「テーマ編集」と行き、「single-shop.php」を開く。
  3. 「つぶくま」の場合はベースとなっているテーマが「Twenty Ten」。
    「Twenty Ten」は「single.php」に「loop-single.php」を読み込ませています。
    したがって「loop-single.php」からソースを引っ張ってこなければなりません。
    このあたりは、テーマによって変わってくるので注意。
    いずれにしても、「single-shop.php」内にカスタムフィールドの各項目を表示させるスクリプトを書くことになります
  4. まずはカスタムフィールドで得た情報をどのように配置するかですがこのあたりは何らかの方法でベースデザインを作ってそれをテンプレートに当てはめるというやり方がいいと思います。
    僕はDreamweaverを使って表組みデザインを作った上でテンプレートに当てはめました
    基本、各項目をテーブルで整然と並べただけですが。
  5. 次に、どの部分に上記テーブル(作成したレイアウト)をいれこむかがポイントになります。
    僕は本文上に置きたかったので
    <div class=”entry-content”>

    <?php the_content(); ?>

    の間に書き込みました。
    本文下に入れたければ上記スクリプトの下に配置すればいいと思います。

  6. 最後にカスタムフィールドで入力されたデータを呼び出します。
    データを呼び出すには、

    <?php echo post_custom(‘キー’)?>

    via : テーマにカスタムフィールドを反映させる方法 | かたつむりくんのWWW
    を使います。
    画像(type = imagefield)の場合はその画像のURLになるので注意して下さい。
    また、地図の部分はショートコードとの合わせ技で、

    <?php echo do_shortcode( ‘[addr2gmap addr=”‘.post_custom(‘address1′).'”]’ ); ?>

    via : FAQ | Contact Form 7

    といった具合に表記します。

以上でできたページが以下のとおりです。
つぶくまショップ紹介ページ
タイトルをお店の名前にしたりと部分的にカスタマイズしています。
やっぱり本文と写真は上のほうがいいかもしれませんねぇ。

 - CMS, WordPress, プログラミング, ユーザビリティ , ,

アドセンス広告メイン

Comment

  1. さくらい より:

    初めまして。
    いつも参考にさせて頂いております。
    宜しければ一つだけ教えて下さい。
    < ?php echo post_custom('キー')?>と入れると、値のみが出力されますが、写真のような「店名・プロットファクトリー」と枠線も入れて表示させるには、どのようにすればいいのでしょうか?
    お手数ですが宜しくお願い致します。

Message

メールアドレスが公開されることはありません。

  関連記事

Livedoor Reederのヘッドラインモードが便利

1年以上前の記事です。内容が古い可能性があります。最近、RSSリーダーに登録して …

twitter(ツイッター)まわりの環境をいじってみた

1年以上前の記事です。内容が古い可能性があります。昨日ツイッターに於きまして「フ …

WordPress(ワードプレス)の国産おススメテーマ「スティンガー(Stinger)」

1年以上前の記事です。内容が古い可能性があります。いや、ほんと良いテーマにめぐり …

ライブドアブログのタグは英字の大文字と小文字を区別しない

1年以上前の記事です。内容が古い可能性があります。先ほどのドコモのロゴが変わった …

LINE(ライン)でブロックされるとこうなる

1年以上前の記事です。内容が古い可能性があります。もうちょっと詳しい記事を書きま …

プロット・ファクトリーがYahoo!でスパム判定【第2章】 (5/8追記)

1年以上前の記事です。内容が古い可能性があります。プロット・ファクトリーとは開店 …

WordPressの更新(アップデート)作業、ちゃんとやったら10万円

1年以上前の記事です。内容が古い可能性があります。自分も使っているWordPre …

WordPress(ワードプレス)のリンク切れチェックに「Broken Link Checker」 #wp

1年以上前の記事です。内容が古い可能性があります。表立っての活躍は見せなくても、 …

新foursquare(フォースクウェア)でチェックインしようとするとSwarm(スワーム)が立ち上がる

1年以上前の記事です。内容が古い可能性があります。位置情報SNSの代表格、「fo …

「ATOK Pad for iPhone」がなかなかよさそうだ

1年以上前の記事です。内容が古い可能性があります。実はiPhoneにも優秀な日本 …

血液型オヤジ