WordPressの自作テーマ制作をしていると、投稿ページでブログカードを設置したい時ありませんか？
今私がこのブログで使っている無料テーマの「cocoon」ではこんな感じで標準装備されています。
最近の無料ワードプレスのテーマでも当然のように標準装備されているし、これが標準装備されているものだと思われている人もいるようですが、実はこの形は標準装備されていません。
自作テーマのWordpressでブログカードを表示させるには？
プラグインを使うのが一番簡単です。「Pz-LinkCard」というプラグインが人気なようですが、動きが重くなるらしく、結構重いという記事を書いている人をみかけました。
という理由から、自分でfunctions.phpに書く方法を探しました。
参考にしたサイトはこちら。
この記事で言われているように、他のやり方で
「Wordpress 外部ブログカード プラグインなし」
のワードで検索されて出てくる方法では、「はてなブログカード」を利用しているようです。
この方が言う
「はてなブログカード」でリンクを設置した場合、外部リンクへ飛んだ際の参照元が「はてな」になってしまう
という箇所が気になります。
ですが、この記事のやり方ではそうではないようなので、安心です。
基本上記サイトの通りに設置すればOKです。
では、なぜわざわざブログ記事にしたか？
というところですが、この方、とても凄くて・・・。なんとブログカードに載せる画像が画面のスクショを採用しているんです！
wordpress.comのAPIを利用してスクリーンショットを取得
というところです。
ある意味行き過ぎている・・・。
私的には、画面のスクショではなく、登録されているそのままのOGP画像が欲しかったんです。
多分一般的だと思います。
特にまとめサイトとかになると、ヘッダーや目次の辺りだけでの画像になってしまい、なんの記事なのか？イメージがし辛いです。
ですので、スクショにしているところをOPGに変えました。
//OGP情報を取得 require_once'OpenGraph.php'; $graph = OpenGraph::fetch($url);
ここで、OGP情報を取得しているみたいなので、絶対にimageもあるはず！
そこで参考にしたサイトはこちら。
$graph->"image"で取ってこれそうです。
なので、スクリーンショットを取得し、表示している箇所を修正し、OGP画像をそのまま表示するように変更しました。
その変更後のソースがこちら。
/* 外部リンク対応ブログカードのショートコードを作成 */ function show_Linkcard($atts) { extract(shortcode_atts(array( 'url'=>"", 'title'=>"", 'excerpt'=>"" ), $atts)); //画像サイズの横幅を指定 $img_width ="300px"; //画像サイズの高さを指定 $img_height = "auto"; //OGP情報を取得 require_once 'OpenGraph.php'; $graph = OpenGraph::fetch($url); //OGPタグからタイトルを取得 $Link_title = $graph->title; if (!empty($title)) { $Link_title = $title;//title=""の入力がある場合はそちらを優先 } //OGPタグからdescriptionを取得（抜粋文として利用） $Link_description = wp_trim_words($graph->description, 60, '…');//文字数は任意で変更 if (!empty($excerpt)) { $Link_description = $excerpt;//値を取得できない時は手動でexcerpt=""を入力 } //OGPを表示 $xLink_img_pre = $graph->image; $xLink_img = '<img src="'. $xLink_img_pre .'" width="'. $img_width .'" />'; //ファビコンを取得（GoogleのAPIでスクレイピング） $host = parse_url($url)['host']; $searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host; if ($searchFavcon) { $favicon = '<img class="favicon" src="'.$searchFavcon.'">'; } //外部リンク用ブログカードHTML出力 $sc_Linkcard .=' <div class="blogcard ex"> <a href="'. $url .'" target="_blank"> <div class="blogcard_thumbnail">'. $xLink_img .'</div> <div class="blogcard_content"> <div class="blogcard_title">'. $Link_title .'</div> <div class="blogcard_excerpt">'. $Link_description .'</div> <div class="blogcard_link">'. $favicon .' '. $url .' <i class="icon-external-link-alt"></i></div> </div> <div class="clear"></div> </a> </div>'; return $sc_Linkcard; } //ショートコードに追加 add_shortcode("sc_Linkcard", "show_Linkcard");
赤のアンダーラインの箇所を変更しただけです。
一番上の参考サイト通りに、CSSも一緒にコピーすれば、無事にOGPの画像が載ったブログカードを表示させることができました。
黄色のアンダーラインは画像のサイズです。ここも元のサイズではなく、自分にとってちょうど良いサイズに変更しました。
使い方も簡単！
ショートコードで登録してくれていますので、投稿ページで
[sc_Linkcard url="https://niyutadesign.com/weblog/study/webukatu/2019/12/15/vol_09/"]
と入力するだけです。
あれ？上手く表示できない。
上記ショートコードを入力しても、上手く表示できない時！
ちょっとしたポイントが！
普通にショートコードをコピーした後にURLの部分だけを書き換えすると、たまに自動的にリンク付きになることがあります。
こんな感じで青字でアンダーラインが入っている場合には、リンク設定がされています。
この状態では上手くブログカードが表示できないので、このリンクを解除してあげる必要があります。
その青字の上にカーソルをのせて押すと、リンク先が設定されている状態がわかります。
その後、上のリンクボタンを押すと解除できます。
これで、リンクが解除できました。
これで公開すれば、きちんとブログカードが表示できます。
内部のブログカードは？
この記述だけでは、外部のブログカードだけに対応されています。
もし、内部のブログカードも対応したいなら、
同じサイトですが、こちらの記事を参考にすれば、上手く表示できます。
こちらのサイトには非常にお世話になりました！！
感謝です。
WordPressのカスタマイズを楽にするには、、
今回は、すでにサイトに公開してくださっている方のソースを元にカスタマイズしました。
このカスタマイズするにも、PHPの知識があるか、ないかでは大違いです。
私も以前はブログ上に公開されているコードをコピペすることしかできなかったのですが、
PHPを学んだら、カスタマイズが非常に楽にできるようになりました。
今回はデータベースとのやりとりなどもPHPで記述できるようになっていたから、
$graph = OpenGraph::fetch($url); $graph->"image"
ここで取得して、値を取り出している。
などの処理をしていることが理解できる訳です。
重要なのは、一から書けなくても見て何をしているのか、理解できればカスタマイズできる。といことです。
もし、Wordpressのカスタマイズをスムーズにしたい方がいれば、PHPやデータベースSQL等の勉強をすることをおすすめします。
コメント