WordPressサイトSSL化(HTTPS化)にあたって、記事本文中のリンクアドレスをPz-LinkCardプラグインで自動ブログカード化したいのでfunctions.phpに書いたこと

スポンサーリンク

WordPressサイトのSSL化自体は各種参考サイトを拝見して無事完了しました。
過去記事内のhttpからhttpsへのリンク修正も「Search Regex」プラグインの一括置換で一瞬で終了。

ブログとホームページのSSL化（HTTPS化）完了。緑の鍵アイコンが付きました
以前からやりたくて仕方がなかったブログとホームページのSSL化（HTTPS化）に今日ようやく取り組んでみました。 ガッツリ半日かかりましたが、なんとか作業も完了。 アドレスが「http://〜」から「https://〜」になり、SSL化の象徴（？）緑の鍵アイコンが付きました！
kotokara-tell.com

しかし、そんな中でひとつの問題が・・・

ブログカードを含む記事の場合に緑の鍵マークが消えてしまうことです。

いわゆるhttpsとhttpの混在コンテンツの問題ですね。

なんかおかしい・・・

URLを記入するだけ！WordPressに内部ブログカードを実装するカスタマイズ方法
自分のブログ内のURLを、Wordpressのブログエディターに貼り付けるだけで、簡単にブログカード表示できるカスタマイズ方法です。
nelog.jp
WordPressエディターに外部URLをコピペするだけで、どんなサイトでも「はてなブログカード」を表示させるカスタマイズ方法
WordpressをカスタマイズしてURLを「はてなブログカード」っぽくリンク紹介する方法です。小さな手間で紹介リンクを綺麗に見せたいときにお勧めです。
nelog.jp

上記記事等を参考に、functions.phpに関数を貼り付けて見たんだけど、外部URLリンク取得の場合にはfavicon.ico取得時にhttp通信するらしく、サイトが部分的にhttpsでなくなってしまう事態に。
該当記事は緑の鍵マークが外れてしまいます。

いろいろ調べて、
そしてたどり着いた結論は・・・

どうやら「はてなブログカード」がSSL化に対応していないらしい

↑これ。

ここまでが今回の前フリ。

Pz-LinkCardプラグインを導入

はてなブログカードの機能、見た目はそのままに他のものに置き換えられないか。
色々探してみて、Pz-LinkCardというプラグインに落ち着いた。

Pz-LinkCard
このプラグインは、ブログカード形式のリンクを表示することができます。テキストのみのリンクにさようなら。
ja.wordpress.org

見た目も制御できそうでコントロールパネルから色々できる。

functions.phpに記述して自動化

過去記事をいちいち記事を書き換えて修正は面倒くさいので、それだけは避けたい・・・

そこで、今までの過去記事に入っているリンクを自動でショートコード化して、Pz-LinkCardプラグインが読み込むようなものをfunctions.phpに記述する方針へ。

まずは下記記事を参考にfunctions.phpにurl_to_blog_card()とurl_to_hatena_blog_card()を記述。

この関数を記入すると、例えば、Wordpressテキストエディターに以下のように入力すると、こういったURL書式だけブログカードに入れ替えます。

WordPressエディターに外部URLをコピペするだけで、どんなサイトでも「はてなブログカード」を表示させるカスタマイズ方法
WordpressをカスタマイズしてURLを「はてなブログカード」っぽくリンク紹介する方法です。小さな手間で紹介リンクを綺麗に見せたいときにお勧めです。
nelog.jp

そして、Pz-LinkCardのショートコードを読み込むように改造する。

functions.phpに記述するコード

url_to_blog_card()の中身を

     $tag = '<div class="blog-card"><div class="blog-card-thumbnail"><a href="'.$url.'" class="blog-card-thumbnail-link">'.$thumbnail.'</a></div><div class="blog-card-content"><div class="blog-card-title"><a href="'.$url.'" class="blog-card-title-link">'.$title.'</a></div><div class="blog-card-excerpt">'.$excerpt.'</div></div><div class="blog-card-footer clear"><span class="blog-card-date">'.$date.'</span></div></div>';

から

$tag = '';

へ書き換えと、

url_to_hatena_blog_card()の中身の

      $tag = '<iframe class="hatenablogcard" src="https://hatenablog-parts.com/embed?url='.$url.'" frameborder="0" scrolling="no"></iframe>';

を

$tag = '';

へ。
該当部分だけ、Pz-LinkCardを読み込むように変えているのみです。
※↑はショートコードのカッコが全角の[]になっていますので、そのままコピペでは動きません。

見た目をカスタマイズ

ここまでくれば、あとは見た目をはてなブログカードに近づけていけば完成。
幅は100%も指定できるのでスマホレイアウトもレスポンシブで対応できそうです。

一つ一つの記事に手を入れなくても良くなったので、とりあえず、めでたしめでたし。

シェアする
ツイートする
Twitter で
スポンサーリンク
タイトルとURLをコピーしました