wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【WPカスタムフィールドはこう使う】カップ焼きそばレビュー記事に、カスタムフィールドで評価スコアを(CSSつけ方もあり)

   

こんにちは、管理人@SS_mshpです。

今回はwordpressの機能『カスタムフィールド』で、より具体的に利用例をあげてみたいと思います。

便利な機能で実装方法もcodexに書いてあるけど『具体的にどのように使えるか』を見てみたいと思います。

■今回カスタムフィールドをつけてみる記事(カップ焼きそばレビュー)


去年はこんなの書いてたんですね~。とりあえずこの記事をチョイス。これに、カスタムフィールドを使って、『値&内容』みたいな余計な情報を出してみたいと思います。例えば『辛さ○○点・総合評価○○点』みたいな感じで

https://sounds-stella.jp/music-creation/archives/3437

■カスタムフィールドを使うための設定

この機能は今まで使ってなかったんで初です。管理画面の記事編集の上の方に、オプションがあるので押します。

カスタムフィールドにチェックを入れます。ただしこれだけでは出力しないので・・・


データを呼び出す『<?php the_meta(); ?>』を入れます(single.php・個別投稿ページ)。『php the_content();』が記事本体を出す部分なので、その下に入れると、本文が終わった後にカスタムフィールドが出てきます。

■記事投稿ページ内での操作と、表示のされ方

■記事投稿ページ内で、カスタムフィールドを追加していく


とりあえず、先ほどの焼きそばの記事の投稿ページ管理画面にきました。記事欄の下のほうにカスタムフィールド入力欄ができたので、『新規作成』を押して作っていきます。


『名前と値欄』があるんで、こんな感じで、焼きそばに関するパラメータをどんどん設定していきます。ある程度項目を共通化しておくと、他の記事でも使いまわせるのでラクになります。

■カスタムフィールドのデフォルト表示例

カスタムフィールドで、パラメーターを実装された焼きそば記事が出たんですけど・・・

なんか、むっちゃ味気ないですね~。リストの黒丸もちょっと邪魔になりそう。

■カスタムフィールドのCSSをエディットして、見栄えを変えてみよう


しかし、カスタムフィールドは、クラスが指定されて出力されています(デフォルトだとpost-metaやpost-meta-key)。ここに、適当にですが、リストの黒丸消したり、文字の色やマージン・ボーダーを指定してみます。span(インライン要素)で、display:blockにする必要性がでてくるかどうかは、運用しだいです。

(CSS記載例)
.post-meta{margin: 8px;color: #666666;}
.post-meta li{list-style-type:none;border: 1px dotted #666666;}
.post-meta-key{font-size: 18px;font-weight: bold;color:#FF0073;}


CSSで色や枠などを指定することができました。

■あとがき・まとめ・参考リンク

今まで使ったことはなかったんだけど、カスタムフィールドをサクッと実装してみました。プラグインでも対応させられる方法があるみたいです(試してません)。他の関数がcodexにかいてあったので、アイデアしだいで活用できる機能です。

個人的には、functions.phpで、ここにでてくるcssのクラスを定義したりできたらよいかと思います(時間あったら実験)。

(参考リンク・wordpress codex)

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - webサイト制作 【タグ】 - ,

Message

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

  関連記事

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …

ワードプレスの子テーマって、なぜ必要なの?

今回は、ワードプレスサイトを作るときにたまに話題になる『子テーマ』につい …

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵は …

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

今回は、googleカレンダーとメールフォームで、予約受付ページを作って …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部 …

ワードプレス・ブログメディアで、ヘッダー画像を変える2通りの方法【phpモバイル非表示有】

今回は、ワードプレス・ブログメディアのサイトを作ったときに、ヘッダー(上 …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …

ワードプレスで画面真っ白で積んだとき、データベースから記事データを抜いて復旧

今回は、ワードプレスで、画面真っ白でどうしようもなくなったときの復旧方法 …

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …