Satoshi Demizu

WordPressのカスタムヘッダーに登録された画像はデフォルトで全ページ共通となっているので、表示するページのカテゴリー属性に応じて出し分けてみます。

使用環境

1.管理画面からヘッダー画像を登録

ヘッダー画像を管理画面＞外観＞カスタマイズ＞ヘッダー画像 からカテゴリ用の画像を登録します。この時現在のヘッダー画像はそのままにしておきます。

2.ファイル側に画像出し分けの条件分岐タグを追加する

親テーマのheader.phpをカスタマイズの対象となる子テーマにコピーしてきます。Twenty Sixteenでは98行目辺りにヘッダー画像表示の記載がありました。

<div class="header-image">
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
  <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
  </a>
</div><!-- .header-image -->

上記コードを条件分岐タグのelse: 以降に配置します。今回はカテゴリーに属しているかどうかで判断するのでin_category()を使用します。

// 記事がニュースカテゴリに属している場合
<?php if (in_category('news')) :
  // ニュースカテゴリ用のヘッダ画像を表示（true）
<?php else: ?>
  // 現在のヘッダーとして設定してある画像を表示（false）
<?php endif; ?>

3.デフォルトのコードを修正する

デフォルトのコードを修正しtrue部分に当て込んでいきます。
まず、imgタグのsrc属性で使われている header_image() 関数は
外観＞カスタマイズ＞ヘッダー画像＞現在のヘッダー の画像URLを取得しています。

// 関数
header_image();
// 出力結果
http://サイトURL/wp/wp-content/uploads/2019/07/ファイル名.jpg

その他のアップロード済み画像（カテゴリA、カテゴリB）のURLは
管理画面＞メディアから取得します。
取得したURLは変数$image_urlとして代入しておきます。

// アップロード画像URLを変数に代入
$image_url = esc_url( get_bloginfo('url')) . '/wp-content/uploads/2019/08/keyimage_category_a.png';
<img src="<?php echo $image_url; ?>" ・・・

次に、imgタグのsrcset属性で使われているget_custom_header()関数の中身を確認します。

// 関数
get_custom_header(); 
// print_rでの出力結果
(
  [url] => http://サイトURL/wp/wp-content/uploads/2019/08/ファイル名.jpg
  [thumbnail_url] => http://サイトURL/wp/wp-content/uploads/2019/08/ファイル名.jpg
  [width] => 1200
  [height] => 306 
  [ video ] =>
  [attachment_id] => 126
)

この中で attachment_id をカテゴリAヘッダー画像用に差し替えたいので、attachment_url_to_postid()関数を使って先述の$image_urlからIDを取得します。

// カスタムヘッダーに登録している画像のURLから添付IDを取得
$attachment_id = attachment_url_to_postid( $image_url );
<img ・・・ srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $attachment_id ) ); ?>"

imgタグの修正はこれで終わりにします、次にヘッダ画像のリンク先を変更します。

4.ヘッダ画像のリンクをカテゴリ一覧に変更する

デフォルトのままだとリンク先がトップページになっているので、カテゴリ一覧に遷移する様修正します。

// お知らせカテゴリーの ID を取得
$category_id = get_cat_ID( 'news' );
// カテゴリーIDから URL を取得
$category_link = get_category_link( $category_id ); ?>
<a href="<?php echo esc_url( $category_link ); ?>" title="お知らせカテゴリ一覧">

5.修正後のソースコード

修正後のコードは下記の通りになりました。

<div class="header-image">
    <?php if (in_category('news')) :
        // カスタムヘッダーに登録している画像のURLから添付IDを取得
        $image_url = esc_url( get_bloginfo('url')) . '/wp-content/uploads/2019/08/keyimage_category_a.png';
        $attachment_id = attachment_url_to_postid( $image_url );
        // 指定したカテゴリーの ID を取得
        $category_id = get_cat_ID( 'news' );
        // このカテゴリーの URL を取得
        $category_link = get_category_link( $category_id ); ?>
        <a href="<?php echo esc_url( $category_link ); ?>" title="お知らせ一覧">
        <img src="<?php echo $image_url; ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
        </a>					
    <?php else: ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
  <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
  </a>
    <?php endif; ?>
</div><!-- .header-image -->

他に良いやり方があればコメント頂けると嬉しいです。

WordPressサイトで商品一覧ページを作る時、商品名・説明文・価格は表示したいです。

デフォルトでは商品名・説明文は記事タイトル・本文抜粋に置き換えられますが、価格はカスタムフィールドを追加する必要があります。

使い方はWordPress Codex に掲載があるので、今回は実際にやった手順を共有します。

使用環境

1.管理画面からカスタムフィールドを追加

カスタムフィールドはデフォルトで非表示になっているので、投稿編集ページの表示オプションからカスタムフィールドをオンにします。

投稿編集画面下部にカスタムフィールドが出現するので新規追加をクリック

項目名・表示する値を登録

項目名は価格にしました。

管理画面の設定はこれで終わりです。次はテンプレートファイルに関数を記載します。

2.フロントで表示するためにファイル側を設定する

get_post_meta() 関数ループ内に記載してカスタムフィールドの中身（メタデータ）を取得します、$keyに項目名を代入しておきます。

$key="価格";
$price = get_post_meta($post->ID, $key, true);

カスタムフィールドの値があった時のみHTMLタグも含めて表示したいので条件分岐タグ内で$price変数を出力します。

$key="価格";
$price = get_post_meta($post->ID, $key, true);
if ( $price ) : ?>
    <span class="price"><?php echo $price.'円'; ?></span>
<?php endif;?>

これだけです、他に良いやり方があれば教えて頂けると嬉しいです。

お問合せフォームプラグイン Contact form7 を入れた後、Gmail宛の問い合わせメールが迷惑フォルダに入る事に気付きました。

原因としてはContact form7側で設定した送信元と、実際に送信されるメールサーバーが異なっていた為、Gmail側でスパム判定されてしまったようです。

WP Mail SMTP プラグインを試したら無事届いたので設定手順を共有します。

使用環境

1.WP Mail SMTPの設定

プラグインをインストール後、設定画面で送信者名を入力

次に、使用するメーラーGmailを選択します。

メールが送信されなかった時に消失するのを防ぐ為、返信先項目はチェックを入れておきます。

ここで、GmailのクライアントIDとクライアントシークレットの入力項目が出てきます。
この項目に必要な情報を用意するにあたり、web application を作成するためのGoogle account を使用する必要があります。

2.Google Account での Web application の作成

新しいタブで sign into your Gmail account and access Gmail’s application registrationを開きます。
WP Mail SMTPの設定画面には後ほど戻ってくるので開いたままにしておきます。

リンクを開き、Gmail accountにログインしたら”APIを有効にする – Google API Console”画面に遷移します。

ドロップダウンにデフォルトで「プロジェクトの作成」が選択されているので、そのまま続行ボタンをクリックします。

このボタンをクリックすると、Googleから”APIは有効になっています”と言われます。設定ページに進むために、認証情報に進むボタンをクリックします。

次のページに於いて、Googleが認証することの手助けとなる、いくつかの質問を受けます。

• 使用するAPI　→Gmail API
• APIを呼び出す場所　→ウェブブラウザ（Javascript）
• アクセスするデータの種類　→ユーザーデータ

これらの質問に上記内容で回答し、必要な認証情報ボタンをクリックします。

このボタンをクリックすると、OAuth 同意画面の設定画面がポップアップで開くので同意画面を設定をクリックして進みます。

この時新しいタブ プロジェクトへの認証情報の追加 が開きますが、後で設定するのでそのままにしておきます。

今回はG suiteを使用しており、@gmail.comのメールアカウントを使用していないので下記の画面に遷移します。アプリケーションの種類は内部を選択し、アプリケーション名はあなたのサイト名を入力します。

次に、承認済みドメインの項目までスキップして、サイトのドメインを入力します。この時 http:// 又は https://は含めません。

その下の[アプリケーション ホームページ] リンク、[アプリケーション プライバシー ポリシー] リンク、[アプリケーション利用規約]（省略可） リンクの項目は、サイトURLを入力します。

入力が出来たら保存します。

この時認証情報画面に遷移するので、一旦そのままにしておき、以前開かれた別のタブプロジェクトへの認証情報の追加に切り替えます。

名前は任意で入力し、承認済みのJavaScript生成元はサイトのURLを入力します。

承認済みのリダイレクト URI欄には、WP MAIL SMTPの設定画面のAuthorized redirect URI からコピーして貼付けて、更新ボタンをクリックします。

これで、クライアントIDを作成できます。

3.認証とメール送信テスト

作成したクライアントIDとクライアントシークレットは編集ボタンから確認できます。

WordPressのWP MAIL SMTP設定画面にもどり、クライアントid・クライアントシークレットを入力して、Authorization項目のボタンをクリックします。

Googleのログイン画面に遷移するので、ログインして同意すれば認証完了です。

最後に、WP MAIL SMTPの設定画面からメール送信が問題ないかテストできます。

他の対策も知ってるよって方いたら教えて頂けると嬉しいです。