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

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

      2020/05/23

こんにちは、管理人@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)

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

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

  関連記事

WP管理画面を使いやすく~カスタムフィールド数値ソート・余計な余計な列を非表示(manage_edit-post_sortable_columnsフックなど)

今回は、カスタムフィールド表示などをつけてごちゃごちゃしてきたWP管理画 …

【WP記事取得クエリ・プラグイン無し】お知らせなどに使える、ショートコードで特定カテゴリ記事を表示プログラム

今回は、最近何件か対応した、お客さん提供用の自社開発WPテーマに標準装備 …

PHP・mb_substr関数を使って、タイトル文字数を揃える(WPレイアウト調整)

今回はPHP関数を使って、表示の調整をしてみたいと思います タイトル文字 …

【ユーザーデータ取得】WordPress定義済み関数の『get_userdata()』『wp_get_current_user()』ってどのように違うの?

今回は、WPシステムのwebサイト制作などでちょくちょくお目にかかる、W …

WordPressサイトに、Microsoft Azureを使って、シングルサインオン機能(パスワードベース・プラグイン無し)を実装してみる

今回は、管理するサイトが増えてきて、『id/pass管理めんどくせ~』っ …

【METAタグで新サイトに転送】meta http-equiv=”refresh”で転送・WPサイトでの活用・301リダイレクトとの使い分けとは?

今回は、管理人がネットサーフィンしていて見つけた、サイトの転送&活用テク …

【PHP】GD・ImageFilterで、画像の色合いを変えてみる

今回は、管理人がPHPプログラムについて学習していて、やってみた事柄を紹 …

【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok

今回は、WordPressバージョン5以上に更新したら勝手についてきた、 …

侍エンジニア塾ブログにあったPHPコードをシンプルに書いてみる(foreachで配列キーや値取得・continueで空要素スキップ)

今回は、(自分もまだプログラム学習中の身ですが)よくある『プログラム学習 …

【PHPでWPカスタマイズ】プラグイン不使用で、テーマに関連記事表示機能を実装しPV・滞在時間を上げる

今回は、サイトをしっかり見てもらうために、『WordPressサイトに、 …

PHP・shuffleやarrayを使った、画像ランダム表示方法~メインビジュアルやバナー・テキストにも利用可能

今回は、以前お取引先のスクールの担当者さまと、『サイトのメインビジュアル …

wordpress構成ファイルのxmlrpc.phpを無効化する方法【実は攻撃されやすい】

今回は、wordpressの構成ファイルで、ちょっとクセのある『xmlr …