広告 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年・３年ぶりの再開になります。　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やYouTubeなど、メディア埋め込み元として使えるサイトは、以下を参照してください。

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ユーザであれば応用可能と思いますので、ご参考にして頂ければと思います！

 

　

スポンサーリンク

　


関連記事 (Tag related)

スポンサーリンク

　

t