SWELLで関連記事を表示してくれるブログカード。
検索性が高く、タイトルやパーマリンクの修正も動的に対応してくれるので便利ですよね。
ただしSEO対策で考えるとブログカードがいいのか、ストレートにアンカーリンクを設置するのが良いのか？
は意見が分かれるところです。
クリックされるのであれば、ブログカードが良いですが。
Googleのクローラーが認識しやすいのはアンカーリンクです。
ということで、記事編集ではブログカードを参照しつつ、実際の出力はアンカーリンクにするというカスタマイズをしてみました。
記事編集時
※編集時は通常のSWELLのブログカードが表示されています。
実際の出力データ
投稿が見つかりません。
※シンプルなアンカーリンクで出力しています。
目次
WordPressでブログカードをアンカーリンクに変換するカスタマイズ
SWELLでブログカードをアンカーリンクに変換するカスタマイズは簡単です。
functions.phpにコードを挿入
functions.phpで文字置換をするだけです。
管理画面 ＞ 外観 ＞fucntions.phpで下記のコードをいれましょう。
function motoki_replace_custom_html($content) {
$pattern = '/<div class="swell-block-postLink">\s*<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">\s*<div class="p-blogCard__inner">\s*<span class="p-blogCard__caption">あわせて読みたい<\/span>\s*<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="[^"]*" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"><\/figure><\/div>\s*<div class="p-blogCard__body">\s*<a class="p-blogCard__title" href="([^"]+)">([^<]+)<\/a>\s*<span class="p-blogCard__excerpt">[^<]*<\/span>\s*<\/div>\s*<\/div>\s*<\/div>\s*<\/div>/';
$replacement = '<p><a href="$1">» $2</a></p>';
$new_content = preg_replace($pattern, $replacement, $content);
return $new_content;
}
add_filter('the_content', 'motoki_replace_custom_html');
上手く置換されない場合。
上記のコードはSWELLのデフォルトのブログカードを変換していますので、
設定を変えている場合は出力されているHTMLを確認してコードの中身を変更してみてください。
確認
投稿が見つかりません。
シンプルなアンカーリンクで出力されました。
<p><a href="https://motoki-design.co.jp/wordpress/seo/">» ＷebサイトのSEO対策（内部施策）の依頼・相談</a></p>まとめ
出力する結果を変える文字置換は色々便利です。
今回の様にブログカードのブロックは便利だけど、アンカーリンクと出力したい場合にも使えます。
ブログカードがよいのか？アンカーリンクが良いのか？はブログによると思いますが。
気になった方は是非試してみてください。