YouTube

Stork19で投稿の詳細ページの広告表示をアバターと投稿者名に書き換えたい

Before / After

Before After

やったこと1: 広告表示をアバターと投稿者名に書き換えたい

対象ファイル:URL/wp-content/themes/jstork19/parts/main-parts.php

#518 あたりのコードをいじっていきます

対象元コード
$prtext = get_option('ad_options_prtext') ? get_option('ad_options_prtext') : '広告';
		echo '<span data-nosnippet class="pr-notation is-style-simple">' . $prtext . '</span>';
		

//var_dump($prtext);は削除しても問題なさそう。

元はこの形

ここからコードをいじって最終的に投稿者のアバターとニックネームを表示していきます。

始めに私が試したコードはこちら

$prtext = get_the_author();
		$author_id  = get_the_author_meta( 'ID' );
  $author_url = get_author_posts_url( $author_id );

		echo '<span data-nosnippet class="pr-notation is-style-simple"><a href="' . $author_url . '">' . $prtext . '</a></span>';
やったこと

このコードは
 ‘ . $prtext . ‘ を、投稿者のニックネームに変更し、該当のニックネームにa hrefタグでauthor ページにリンクするようにしました。

しかしこのPHPコードには何かおかしい部分があるようです。

パターン1: 投稿者名のみ表示

指摘されて変更したのがこちら

$author_id = get_the_author_meta('ID'); // 投稿者のユーザーIDを取得
$author_name = get_the_author(); // 投稿者のニックネームを取得
$author_url = get_author_posts_url($author_id); // 投稿者のページのURLを取得

echo '<span data-nosnippet class="pr-notation is-style-simple"><a href="' . esc_url($author_url) . '">' . esc_html($author_name) . '</a></span>';
解説
  • get_the_author() は投稿者のニックネームではなく、投稿者の名前を取得する関数です。代わりに get_the_author_meta('ID') を使用して投稿者のユーザーIDを取得し、それを get_author_posts_url() に渡して投稿者のページのURLを取得します。
    (投稿者のページへのリンクは、get_author_posts_url() 関数を使用して取得しています。)
  • esc_url()esc_html() を使用して、URLとテキストをエスケープしてセキュリティを強化します。
  • リンクのテキストは esc_html() を使用してエスケープします。

これで投稿者のニックネームを取得し、そのニックネームをリンク付きで表示出来るようになりました!

パターン2: アバターを表示(四角)

アバターを追加したい

先程のコードに20pxのアバターを追加します。

修正後
$author_id = get_the_author_meta('ID'); // 投稿者のユーザーIDを取得
$author_name = get_the_author(); // 投稿者のニックネームを取得
$author_url = get_author_posts_url($author_id); // 投稿者のページのURLを取得
$author_avatar = get_avatar($author_id, 40); // 投稿者のアバターを取得(サイズ指定:40px)

echo '<span data-nosnippet class="pr-notation is-style-simple">';
echo '<a href="' . esc_url($author_url) . '">' . $author_avatar . '</a>'; // アバターにリンクを追加
echo '<a href="' . esc_url($author_url) . '">' . esc_html($author_name) . '</a>'; // 名前にリンクを追加
echo '</span>';

これでアバターと名前のそれぞれ両方が投稿者のページにリンクされます。

これだと<a href=”‘ . esc_url($author_url) . ‘”>の部分が重複してるのでコードをまとめたのがこちら

修正後 更にまとめてみた
$author_id = get_the_author_meta('ID'); // 投稿者のユーザーIDを取得
$author_name = get_the_author(); // 投稿者のニックネームを取得
$author_url = get_author_posts_url($author_id); // 投稿者のページのURLを取得
$author_avatar = get_avatar($author_id, 20); // 投稿者のアバターを取得(サイズ指定:40px)

echo '<span data-nosnippet class="pr-notation is-style-simple">';
echo '<a href="' . esc_url($author_url) . '">' . $author_avatar . esc_html($author_name) . '</a>'; // アバターと名前に同時にリンクを追加
echo '</span>';

これでアバターと名前が同時に投稿者のページにリンクされます。

パターン3: アバターを表示(丸形)

アバターを丸くしたい

アバターの形が四角なのでCSS丸くします。

丸くしたい場合、さっきまとめたコードでは、アバターと名前が同じリンク内に含まれているため、それぞれが個別のリンクになるように変更する必要があります。

修正後 リンクを分けてアバターを丸くする
$author_id = get_the_author_meta('ID'); // 投稿者のユーザーIDを取得
$author_name = get_the_author(); // 投稿者のニックネームを取得
$author_url = get_author_posts_url($author_id); // 投稿者のページのURLを取得
$author_avatar = get_avatar($author_id, 20); // 投稿者のアバターを取得(サイズ指定:20px)

echo '<span data-nosnippet class="pr-notation is-style-simple">';
echo '<a href="' . esc_url($author_url) . '" style="display: inline-block; width: 20px; height: 20px; border-radius: 50%; overflow: hidden;">' . $author_avatar . '</a>'; // アバターにリンクを追加
echo '<a href="' . esc_url($author_url) . '">' . esc_html($author_name) . '</a>'; // 名前にリンクを追加
echo '</span>';
解説

このコードでは、style 属性を使用してアバターのコンテナに対して直接 CSS を適用しています。display: inline-block; は、要素をインラインブロック要素として表示するため、widthheight を指定できるようにします。border-radius: 50%; は、要素をまんまるにします。overflow: hidden; は、円形の要素に画像がはみ出ないようにします。

縦の高さが違う

この状態だと縦の高さがアバターの丸と名前が違うのでCSSで修正する。

修正後 名前をアバターの縦方向の中央に配置するために、CSSを使用
$author_id = get_the_author_meta('ID'); // 投稿者のユーザーIDを取得
$author_name = get_the_author(); // 投稿者のニックネームを取得
$author_url = get_author_posts_url($author_id); // 投稿者のページのURLを取得
$author_avatar = get_avatar($author_id, 20); // 投稿者のアバターを取得(サイズ指定:20px)

echo '<span data-nosnippet class="pr-notation is-style-simple" style="display: flex; align-items: center;">';
echo '<a href="' . esc_url($author_url) . '" style="display: inline-block; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; margin-right: 5px;">' . $author_avatar . '</a>'; // アバターにリンクを追加
echo '<a href="' . esc_url($author_url) . '">' . esc_html($author_name) . '</a>'; // 名前にリンクを追加
echo '</span>';
解説

この修正では、<span>要素にdisplay: flex; align-items: center;というCSSスタイルが追加され、アバターと名前が垂直方向に中央揃えになります。align-items: center;は、flexコンテナ内のアイテムを垂直方向に中央揃えにします。

高さが揃った!

完成形のコード

main-parts.phpファイルの523行付近を下記コードに修正します。

ファイルパス:URL/wp-content/themes/jstork19/parts/main-parts.php

		$author_id = get_the_author_meta('ID'); // 投稿者のユーザーIDを取得
		$author_name = get_the_author(); // 投稿者のニックネームを取得
		$author_url = get_author_posts_url($author_id); // 投稿者のページのURLを取得
		$author_avatar = get_avatar($author_id, 20); // 投稿者のアバターを取得(サイズ指定:20px)
		
		echo '<span data-nosnippet class="pr-notation is-style-simple" style="display: flex; align-items: center;">';
		echo '<a href="' . esc_url($author_url) . '" style="display: inline-block; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; margin-right: 5px;">' . $author_avatar . '</a>'; // アバターにリンクを追加
		echo '<a href="' . esc_url($author_url) . '">' . esc_html($author_name) . '</a>'; // 名前にリンクを追加
		echo '</span>';
完成形

やったこと2: アイコンをインフォから鉛筆に変える

Before After

カスタムCSSに下記コードを追加

完成形のコード

.pr-notation::before {
  font-family: var(--stk-font-awesome-free, "Font Awesome 5 Free");
  font-weight: bold;
  content: "\f304";
  display: inline-block;
  transform: scale(1.05);
  margin-right: 0.3em;
}



.pr-notation a {text-decoration: none;color:#333333;
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ACFフィールド "place_id" の登録件数: 14