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

Before / After

Before After

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

対象ファイル：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 Before / After
2 やったこと１: 広告表示をアバターと投稿者名に書き換えたい
3 やったこと2: アイコンをインフォから鉛筆に変える
- 3.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:　アバターを表示（四角）

アバターを追加したい

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

修正後

$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; は、要素をインラインブロック要素として表示するため、width と height を指定できるようにします。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;
}