【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サイト制作 【タグ】 - CSSエディット, ワードプレス
関連記事
-
-
【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 …
-
-
【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法
今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …
-
-
【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる
今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオー …
-
-
【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)
今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …
-
-
【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?
今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …
-
-
ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法
今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …