twenty seventeen 内部リンクをショートコードでブログカード化

WordPress Twenty Seventeen
ブログカードのカスタマイズ
ショートコードでブログカードを自作する
 
標準のブログカードは、サイズが大きすぎていくつも並べられない。そこで、いくつも並べても見やすいサイズのブログカードを自作することにした。
自作するにあたっては、ブログのメンテナンス性を考慮し、URLを直接記述する方式ではなく、『ショートコード』で実装することにした。
 
スポンサー リンク
 
 
ブログカードとは「カード形のリンク」
ブログ記事投稿時に、URLをそのまま・直接記述するだけで「カード形のリンク」が表示できる。WordPress4.4から標準搭載された「リンクのブログカード表示」機能で、「Embed」すなわち「埋め込み」とも呼ばれる。
 
 
標準ブログカードの表示要領
 
エディターのビジュアルモードで、直接【 URL 】のみを記述するだけで良いが、生成されるHTMLの結果で次の様になる。
<div>https://arakoki70.com/?p=798</div> ・・・NG
<p>https://arakoki70.com/?p=798</p>    ・・・OK
 
ブログカードの表示結果。上段:div タグ、下段:p タグ。
ショートコードでブログカード化
 
標準のブログカードは、上図の様にサイズが大きすぎる。
 
 アイキャッチ画像が小さくても、下図の下段の様に、まだ、カードサイズは大きすぎるので、上段の例の様に、 アイキャッチ画像を縮小して、いくつでも並べられるサイズのブログカードを自作することにした。
ショートコードでブログカード化
 
 
『ショートコード』での実装要領
 
自作するにあたっては、URLを直接記述する方式にすると、
①.カスタマイズと標準の機能が競合して、Wordpress標準の「埋め込み」機能が適用されてしまうことがある。
②.このために、Wordpress標準の「埋め込み」動作を無効にする必要がある。
③.<p>タグとURLを合わせた正規表現で判断すると、pタグを使用しない記述をすると動作をしない。
等、ブログのメンテナンス性を考慮し、URLを直接記述する方式ではなく、『ショートコード方式』で実装することにした。
 
①.子テーマの ( functions.php ) に以下のコードを追記。
 
10行目で、文字列を指定した長さでの【 切り取り 】を可能にしている。
28行目で、サムネイルがなかった場合の、画像を指定。
45行目が、『抜粋』の取得で【 100文字 】とした。
54行目で、『抜粋』を表示。
 
②.ブログカードのデザインを、子テーマのスタイルシート  (style.css ) に追記。
 
43行目からが、『タイトル』表示で、太字にした。
67行目からが、『抜粋』の表示。
 
ショートコードの書き方
 
リンクしたいURLを、下記のように記述。
 
引数に「title」を指定すれば任意のタイトルでリンクすることがで、
引数に「excerpt」を指定すれば、任意の説明文を付加することができる。
 
引数を指定した例。
 
引数を指定した例
 
 
完成形
 
ブログカードをいくつも並べた例。
内部リンクをショートコードでブログカード化
 
これで、サイト内の他の記事を参考表示するのが、少しオシャレになった。
 

以上。
(2018.01.04)

 
             

スポンサー リンク
 

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください