広告 Affinger・改善

Affinger6(WordPressテーマ)対応の外部(URL)ブログカード用ショートコードを作る。

スポンサーリンク

 

Affinger6は、Gutenbergのブロックエディタへの機能が強化されて、「埋め込み」ブロック内に、外部(又は内部)のブログURLを記入すると従前のページidによる内部ブログカードと略同等のブログカードが表示される様になりました。 但し、embed非対応(後述)のページはカード化出来ません。

一方の旧クラシックエディタでは、ページURLを直書きするか、Wordpressに付属している埋め込み用のショートコード【embed】でブログURLを囲めばブログカードが表示されますが、以下の問題があり、この問題を回避するため、Post Snippetsプラグインで外部(URL)ブログカード用ショートコードを作成することにしました。 

URL 直書の問題点

  1. ビジュアルエディタにブログカードが表示されて編集時、邪魔になる。
  2. ChromeのHTMLエラーチェッカーで確認すると、自動整形機能のためか?余分な<p>タグが付きエラーになる。

 

スポンサーリンク

 

 

作成したショートコードについて

作成した外部(URL)ブログカード用ショートコード

 new shortcode
[wp_card url="" class="" width="100%" margin="0"]
 urlオプションに外部(URL)ブログ・アドレスを入力します。 他のオプションは後述

 

オペレータ
オペレータ
ショートコードの中で" "で囲まれた部分がオプション です。 オプションの記入例(使い方)を下に示します

 

url オプションに、当ブログのhttps://pianoforte32.com/ototen2022/を記入すると

 

class オプションに myshadow_drop を記入すると (事前に、子テーマのstyle.css にmyshadow_dropに対するクラス cssを追記しておく) →  .myshadow_drop{filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.6));}

 

その他のオプション
width は横幅をpx(or %)で指定。 margin は上右下左のマージンをpxで指定できます。

 

オペレータ
オペレータ
参考までに、Affinger6の 内部(id指定)ブログカードを示しておきます。 new shortcodeの外部(URL)ブログカードと略同等ですね。
 Affinger6のshortcode
[st-card myclass="myshadow" id="☓☓☓☓" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="off" thumbnail="on" type=""]
idオプションに、ブログページのid番号☓☓☓☓を記入します。

内部(id指定)カード(表示例)

OTOTEN(音展)2022に行ってきました。(Lacquer Master Soundのトークアンド試聴会にフォーカス)

音展は、新型コロナの影響で2019年を最後に今年2022年・3年ぶりの再開になります。 6月11日、12日に東京国際フォーラムで開催されました。 オミクロンが下火になって来ているものの、まだ完全収束に ...

 

外部(URL)ブログカード用ショートコードの作成

ショートコードが簡単に作成できる、Post Snippets プラグインを使います。 Post SnippetsプラグインをWordpressにインストールして有効化します。 Post Snippetsプラグインの使い方は、「小技・事例集」を参照してください。

Post Snippets 設定画面は以下の通りで、番号を振った部分に従って説明します。

にショートコードの名称を記入します。 今回は、wp_card にしました。

にphpコード(下記)を記入します。

以上のPHPコードは、以下のブログ記事を参考に作成しています。https://wordpress.stackexchange.com/questions/22524/do-shortcode-not-working-for-embed/

 

に変数(オプション)のデフォルト値を記載します。

url,class,width=100%,margin=0

にショートコード化するので、レ点を入れます。 

PHPコードを使っているので、レ点を入れます。

にショートコードの簡単な説明を記載します。 参考として以下を記載

[ embed]のショートコード化です。 urlにブログページやTwitter等のurlをセットでブログカードが表示されます。 その他のオプションはclass指定、横幅サイズや位置調整ができます。

 

Saveボタン」を押して「外部(URL)ブログカード用ショートコード: wp_card 」の完成です。 非常に簡単に作成できますね。 クラシックエディタのコンソールにあるPost Snippetsボタンを押してwp_card を選べば簡単にショートコードを呼び出すことも出来ます。 また、このショートコードはブロックエディタの[ / ]short cod ブロックでも使えます。 
オペレータ
オペレータ

 

外部(URL)カードの注意点

  1. embedに非対応のページはカード化出来ません。 embedに非対応のページはリンク付きのURLとして表示されます。(事前に調べるには、ブラウザで対象ページを表示させ、URL入力欄に「URL」の後に /embed を追記します。 対応出来ているとそのブラウザにカード的な表示に変わることで判別できます。)
  2. 外部(URL)カードは、ブラウザの同一タブで開き、新しいタブでは開きません。(target属性の_blank指定ができないため)

 

このショートコードで、色々なメディアの埋め込みも簡単です。

ポイント

Twitterの表示例

 new shortcode
[wp_card url="https://twitter.com/アドレス" class="myshadow_drop" width="300px" margin="0 auto"]カード幅を300pxにして、margin="0 auto"でカードをセンタリングしています。

YouTube 公式ベルリン・フィル

 new shortcode
[wp_card url="https://youtu.be/アドレス" class="myshadow_drop" width="300px" margin="0 auto"]カード幅を300pxにして、margin="0 auto"でカードをセンタリングしています。
この設定でYouTubeの表示は可能ですがオススメしません! PageSpeed Insightsでの評価が低下します。 下の画像は、「タグ」 > 「その他のパーツ」からYouTubeを選択しYouTubeのIDを指定しています。

 

Audioファイルの表示例

 new shortcode
[wp_card url="Audioファイルのアドレス" class="" width="300px" margin="0 auto"]プレーヤ幅を300pxにして、margin="0 auto"でカードをセンタリングしています。

動画ファイルの表示例

 new shortcode
[wp_card url="動画ファイルのアドレス" class="myshadow_drop" width="300px" margin="0 auto"]プレーヤ幅を300pxにして、margin="0 auto"でカードをセンタリングしています。

 

 

以上、「Affinger6(Wordpressテーマ)で外部(URL)ブログカード用ショートコードを作る。」でした。 このショートコードは、Affinger6に関わらず、Wordpressユーザであれば応用可能と思いますので、ご参考にして頂ければと思います!

 

 

スポンサーリンク

 

スポンサーリンク

 

t