今回は<a href="https://ja.wordpress.org/plugins/all-in-one-seo-pack/" target="_blank" rel="noopener noreferrer">All in One SEO</a>を使用してFacebookとWordPressとの連携を行います。 <h2 id="h5d746a97ca">動作環境</h2>以下の環境で動作を確認しました。<pre><code>WordPress 5.7.2
All in One SEO 4.1.1.1
Facebook Graph API v10.0</code></pre> <h2 id="hf0465effb3">連携について</h2><h3 id="h94c2df26e9">どうすれば連携扱いとなるのか</h3>最終的にブログ記事の<code>&lt;head&gt;</code> に下記のようなタグを挿入することができれば、 連携できたことになります。 Facebook 管理者 ID<pre><code>&lt;meta property="fb:admins" content="" /&gt;</code></pre> Facebook App ID<pre><code>&lt;meta property="fb:app_id" content="" /&gt;</code></pre> <code>content=""</code> には固有のIDが入ります。 このIDの取得には<a style="background-color:#ffffff" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール</a>への登録が必要となります。 取得したIDを<a style="background-color:#ffffff" href="https://ja.wordpress.org/plugins/all-in-one-seo-pack/" target="_blank" rel="noopener noreferrer">All in One SEO</a>を使用してmetaタグに変換し、ブログ記事に動的な挿入を行います。 <h3 id="hde256594dd">必ずしも2つ必要なわけではない</h3>ブログ記事をシェアする際にOGPタグを有効にしたいだけであれば、 「Facebook 管理者 ID」のみを埋め込むだけでも問題はありません。 <h3 id="ha26d79706a">連携しないとどうなるのか</h3>ブログ記事をシェアする際にOGPタグが正常に読み込まれません。 URLを挿入しても、以下のようにドメインとページ名の表示しか行われません。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/2b3c005c95de4e69a53c1ff7175c3fa2/facebook-notwork-ogp.png" alt=""> 連携ができている場合は以下のような表示となります。 アイキャッチ画像、記事名、本文から抜粋したテキストが正常に表示されています。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/f0f2a91f4a7f47acaf0f32b01d3e2d06/facebook-work-ogp.png" alt=""> <h2 id="hb021f1d9d0">Facebookデベロッパーツールでアプリを作成する</h2><h3 id="ha6a2ae4059">Facebookデベロッパーツールに登録する</h3>Facebook個人用アカウントから登録を行います。 <a style="background-color:#ffffff" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール</a> 具体的な登録方法については下記の記事が参考になります。 特に難しいことはなく、画面の指示に従っていけば問題ありません。 <a href="https://www.sakurasaku-labo.jp/blogs/facebook-developer" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール（Facebook for developers）の登録手順と使い方</a> <h3 id="h82f682a3ab">新しいアプリを作成する</h3>登録が完了すれば、アプリ一覧画面へアクセスが可能となります。 画面右上の「アプリを作成」をクリックしてください。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/b37202c7cd5641b89235ee7429f699ab/fbd-applist.png" alt=""> クリックするとこのようなモーダルウインドウが表示されるため、 「ビジネス」を選択して「次へ」をクリックしてください。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/12ebc01024df4a96ab74562d377eceaa/fbd-regist-1.png" alt=""> アプリ表示名を入力します。ここでは「WordPress用」にしました。 2つ下にあるアプリの目的を選択し、「アプリを作成」をクリックしてください。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/553e8b1affb2492db0b587333ac874a0/fbd-regist-2.png" alt=""> 以下のようなページに移動します。左上に「アプリID」をメモしてください。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/37912ed6142b42ebba16ffed4030c0c2/fbd-dashboard.png" alt=""> ヘッダーの「ツール」をクリックし、「グラフAPIエクスプローラ」をクリックしてください。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/17dca404773b48f093591b27147a40e9/fbd-dashboard-explorer-lead.png" alt=""> 以下のようなページに移動します。右の「Generate Access Token」をクリックしてください。 パスワード入力のウインドウがポップアップで表示されるため、入力して認証を行ってください。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/3eaff18213ba46388ff18143530dcf56/fbd-dashboard-explorer.png" alt=""> 認証完了後、アクセストークンに文字列が入力されるため、 右上の「送信」をクリックしてください。 画面中央に「id」が表示されるためメモしてください。 これが管理者IDとなります。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/3bc3ed23e90c4206a785afe2f3d5eabf/fbd-dashboard-explorer-get-req.png" alt=""> これで<a style="background-color:#ffffff" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール</a>での操作は終了です。 次はWordPressの操作に移ります。 <h2 id="h30e5259d77">プラグインをインストールする</h2>WordPress管理画面から行ってください。 サイドバーの「プラグイン」&gt; 画面右上の「新規追加」&gt; 画面右上の検索ボックスから 「All in one」などのキーワードで検索を行い、インストールを行います。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/052b0ab4106e465b9f1fd7b35f5c2ca3/install-aioseo.png" alt=""> 初回インストールの場合、セットアップウィザードが始まります。 環境に応じて設定を行ってください。私はデフォルトのままにしておきました。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/0d7a5bdc9ff64ba18dc83abc93e3ac03/setup-aioseo.png" alt=""> セットアップが終了後、サイドバーの「 All in One SEO」&gt;「ソーシャルネットワーク」をクリックし、 画面上部の「Facebook」をクリックします。以下のようなページに移動します。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/832fcd42ce774fe6b6fc8b1b7e0fe3b3/wp-aioseo-facebook-lead.png" alt=""> スクロールすると「高度な設定」があり、 「Facebook 管理者 ID」と「Facebook App ID」にメモしたIDを入力してください。 <img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/5f24c0d676cf44b88ca1505a3a6fbf2b/wp-aioseo-facebook.png" alt=""> 完了後はブログ記事のソースを確認しましょう。 以下のタグが追加されていれば設定は完了です。<pre><code>&lt;meta property="fb:admins" content="" /&gt;
&lt;meta property="fb:app_id" content="" /&gt;</code></pre> 以上となります。お疲れさまでした。

FacebookとWordPressをAll in One SEOを使用して連携する

Advanced Custom Filed で設定したカスタムフィールドの値をURLパラメータを使用して部分一致で検索してみます。 <h2 id="h9bbb0bca62">開発環境</h2>下記の環境で動作を確認しました。<pre><code>WordPress 5.2.2
LocalbyFlywheel 3.0.4
Advanced Custom Filed 5.8.5</code></pre> <h2 id="h59f744c0be">実際のコード</h2>カスタムフィールドの名前と値はURLパラメータで指定します。クロスサイトスクリプティング（XSS）には注意してください。<pre><code>https://example.com/page/?key=[カスタムフィールド名]&amp;value=[カスタムフィールドの値]</code></pre> たとえば下記のようなURLの場合、<code>page</code>というカスタムフィールドに<code>tanaka</code>という値が含まれている記事を一括で出力します。<pre><code>https://example.com/page/?key=name&amp;value=tanaka</code></pre> 実際のコードは下記の通りになります。コピーして表示させたい場所に貼り付けしてください。<pre><code>$key = $_GET["key"];
$value = $_GET["value"];

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
 'post_type' =&gt; 'post',
 'orderby' =&gt; array( 'meta_value_num' =&gt; 'ASC', 'date' =&gt; 'DESC', ),
 'meta_key' =&gt; $key,
 'meta_query' =&gt; array(
 array(
 'key'=&gt;$key,
 'value'=&gt;$value,
 'compare'=&gt;'LIKE'
 )
 ),
 'posts_per_page' =&gt; 10,
 'paged' =&gt; $paged,
);
$query = new WP_Query( $args );

if( $query -&gt; have_posts()){
 while ( $query-&gt;have_posts() ) {
 $query-&gt;the_post();

 $cat = get_the_category();
 $cat_ttl = the_title('','', false);
 $cat_name = $cat[0]-&gt;cat_name;
 $post_img = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
 $content = get_the_content();
 $content = wp_trim_words( $content, 78, '[...]' );

 echo $cat_ttl;
 echo $cat_name;
 echo $content;
 }
 $GLOBALS['wp_query']-&gt;max_num_pages = $query-&gt;max_num_pages;
 wp_reset_postdata();
}</code></pre> <h2 id="hc499e4ad38">解説</h2>まずは変数を指定します。 <code>$key</code>はカスタムフィールド名、<code>$value</code>はカスタムフィールドの値が入ります。<pre><code>$key = $_GET["key"];
$value = $_GET["value"];</code></pre> 設定した変数を使用してサブループの準備を行います。 <code>meta_query</code>の<code>compare</code>の値を<code>LIKE</code>にすることで部分一致を実現しています。 他にも <code>=</code> や <code>!=</code> など様々な指定方法があります。詳しくは公式のリファレンスを確認してください。 <a style="color:#2e75d4" href="https://wpdocs.osdn.jp/%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Meta_Query" target="_blank" rel="noopener noreferrer">クラスリファレンス/WP Meta Query - WordPress Codex 日本語版</a><pre><code>$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
 'post_type' =&gt; 'post',
 'orderby' =&gt; array( 'meta_value_num' =&gt; 'ASC', 'date' =&gt; 'DESC', ),
 'meta_key' =&gt; $key,
 'meta_query' =&gt; array(
 array(
 'key'=&gt;$key,
 'value'=&gt;$value,
 'compare'=&gt;'LIKE'
 )
 ),
 'posts_per_page' =&gt; 10,
 'paged' =&gt; $paged,
);
$query = new WP_Query( $args );</code></pre> 準備が完了したので、実際に出力を行います。 記事名, カテゴリ名, 本文しか出力しないように設定していますので、好きなように書き換えしてください。<pre><code>if( $query -&gt; have_posts()){
 while ( $query-&gt;have_posts() ) {
 $query-&gt;the_post();

 $cat = get_the_category();
 $cat_ttl = the_title('','', false);
 $cat_name = $cat[0]-&gt;cat_name;
 $content = get_the_content();

 echo $cat_ttl;
 echo $cat_name;
 echo $content;
 }
 $GLOBALS['wp_query']-&gt;max_num_pages = $query-&gt;max_num_pages;
 wp_reset_postdata();
}</code></pre> 以上になります。お疲れ様でした。

カスタムフィールドの値をURLパラメータを使用して部分一致で検索する

WordPressのプラグインである、Contact Form 7に送信確認画面を追加してみます。 <h2 id="h9bbb0bca62">開発環境</h2>下記の環境で動作を確認しました。<pre><code>WordPress 5.2.2
LocalbyFlywheel 3.0.4
Contact Form 7 5.1.4</code></pre> <h2 id="hdd1091c01b">プラグインのインストール</h2>デフォルトではサポートしていない機能のため、プラグインの追加が必要になります。 WordPressの管理画面から 「Contact Form 7 add confirm」 を検索してインストールし、 有効化してください。 <h2 id="hc2b43e3a6f">テンプレートに専用のフォームタグを埋め込む</h2>インストール後、管理画面からContactForm7のフォーム編集画面に移動すると、 「確認ボタン」「戻って編集ボタン」が追加されています。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/cf-confirm.png" alt=""> 下記のコードを設置したい場所にペーストしてください。 <h2 id="h23b1982542">送信確認画面</h2>送信確認画面に移動します。 <code>[confirm]</code>を設置した場合は、必ず<code>[submit]</code>もセットで設置してください。 設置しないと入力内容確認画面で止まってしまい、送信ができなくなります。 <code>[confirm]</code>を設置せず、<code>[submit]</code>のみ設置している場合は、確認画面を挟まずに送信を行います。<pre><code>[confirm "入力内容を確認する"]</code></pre> <h2 id="h76cba3d795">送信</h2>入力した内容で送信を行います。<pre><code>[submit "送信する"]</code></pre> <h2 id="he3cb321a5c">入力画面に戻る</h2>送信確認画面でのみ表示されます。 入力した情報を維持したまま入力画面に戻れます。<pre><code>[back "情報を修正する"]</code></pre> <h2 id="hb7f845605f">画面ごとに要素の表示を切り替える</h2>このプラグインをインストールすると、 入力・確認・送信画面でのみ特定の要素を表示することができるようになります。 下記のクラスを追加してください。<pre><code>入力画面のみで表示：　.wpcf7c-elm-step1
確認画面のみで表示：　.wpcf7c-elm-step2
完了画面のみで表示：　.wpcf7c-elm-step3</code></pre> 「Contact Form 7 add confirm」が有効かつ、フォーム内でのみ利用可能です。 固定ページなどに埋め込みしている場合、フォーム部分以外（コンテンツ部分）に上記クラスを追記しても動作しないので注意してください。

カテゴリーが「WordPress」の記事

カテゴリ