Wordpress
wordpress
2021/02/25
[WordPress]Smart Custom Field(SCF)で管理画面に独立したカスタムフィールドを設置する
こんにちは、中の人です。仕事が忙しく、長らく備忘録を付けることができずにいたので久々の更新になります。 今回はWordPressの管理画面にカスタムフィールドを設置したい方へ向けた記事になります。 "管理画面"と言っても、無料版Advanced Custom Fields(ACF)のように投稿ページや固定ページの編集画面内ではなく、独立したカスタムフィールドとして管理画面に設置する方法になります。 恐らく言葉だけではイメージしづらいかと思うので、先に完成したキャプチャを貼っておきます。 こんな感じで管理画面のサイドバーに「独立したカスタムフィールド」という名称でメニューが作成され、そのページにはカスタムフィールドが表示される形になります。このように独立したカスタムフィールドを表示させるためにはSmart Custom Field(SCF)の「オプションページ」という機能を使います。 もくじIndex オプションページとは オプションページを作成する オプションページのカスタムフィールドに入力された値を出力する オプションページとは Smart Custom Field(SCF)の開発者のキタジマさんによると"ページ単位とかカテゴリー単位ではなく、サイト共通で使用するようなオプションを設定したい場合に便利です。"とのことでした。 オプションページの機能を使うと、例えばトップページのメインビジュアルを変更するためのフォームやちょっとしたお知らせテキストを表示させるためのフォームなど、サイト全体を通して共通のカスタムフォームを設置できるということですね。 オプションページのあれこれ オプションページを作成する 作成方法に関して、下記のサイトがとても参考になります。私も下記のサイトに救われた人の1人でした。ありがとうございます。 【WordPress】カスタムフィールドならこれ！Smart Custom Fields(SCF)の使い方完全まとめ オプションページのカスタムフィールドに入力された値を出力する // カスタムフィールドの値を取得 SCF::get_option_meta('メニュースラッグ', 'フィールド名'); // グループの値を取得 SCF::get_option_meta('メニュースラッグ', 'グループ名'); // そのオプションページの全てのデータを取得 SCF::get_option_meta('メニュースラッグ'); 基本的には上記3つでカスタムフィールドの値を出力できます。値の有無を判断して条件分岐したい場合は下記のようにしてあげると幸せになれます。 $option_field = SCF::get_option_meta('メニュースラッグ', 'フィールド名'); if(!empty($option_field)) { echo $option_field; }
2020/05/18
[WordPress]プラグインに頼らずOGP設定してみる
こんにちは、中の人です。 WordpressではSEO周りの設定を勝手にやってくれる「All in One SEO」が有名ですが、サイトの表示が遅くなるというデメリットもあります。 そこで、functions.phpでSEO表示用の関数を作ってwp_head();に出力してしまおうと、筆者はそう思ったんですね。 下準備 下準備という程では無いですが、header.phpの<head>~</head>に<?php wp_head(); ?>を追記します。 ここ忘れると上手く出力できません。 functions.phpにコピペでOK 早速ですが、下記をfunctions.phpにコピペするだけで勝手にmetaタグを生成してくれます。 //headにOGPを出力 add_action('wp_head','my_meta_ogp'); function my_meta_ogp() { if( is_front_page() || is_home() || is_singular() ){ global $post; $ogp_title = ''; $ogp_descr = ''; $ogp_url = ''; $ogp_img = ''; $insert = ''; if (is_front_page() || is_home()) { //フロントページまたは投稿インデックスページの場合 $ogp_title = get_bloginfo('name'); $ogp_descr = get_bloginfo('description'); $ogp_url = home_url(); } elseif(is_singular()) { //投稿ページまたは固定ページの場合 setup_postdata($post); $ogp_title = $post->post_title; $ogp_descr = mb_substr(get_the_excerpt(), 0, 100); $ogp_url = get_permalink(); wp_reset_postdata(); } //og:type $ogp_type = (is_front_page() || is_home()) ? 'website' : 'article'; //og:image if (is_singular() && has_post_thumbnail()) { $ps_thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); $ogp_img = $ps_thumb[0]; } else { $ogp_img = '●アイキャッチが無い場合に表示されるOGP画像のパス●'; } //出力するOGPタグ $insert .= '' . "\n"; $insert .= '' . "\n"; $insert .= '' . "\n"; $insert .= '' . "\n"; $insert .= '' . "\n"; $insert .= '' . "\n"; $insert .= '' . "\n"; $insert .= '' . "\n"; $insert .= '' . "\n"; echo $insert; } } 少し注意点 下記の2箇所は任意のものに変更してください。 デフォルトOGP画像のファイルパス $ogp_img = '●アイキャッチが無い場合に表示されるOGP画像のパス●'; TwitterのアカウントID $insert .= '' . "\n"; 設定できたらFacebookのシェアデバッガーで確認 上手く設定できているか確認しましょう。 スクレイピングしても反映されない場合は恐らく設定に誤りがあります。 シェアデバッガー
