WordPressサイトのSSL化自体は各種参考サイトを拝見して無事完了しました。
過去記事内のhttpからhttpsへのリンク修正も「Search Regex」プラグインの一括置換で一瞬で終了。
しかし、そんな中でひとつの問題が・・・
ブログカードを含む記事の場合に緑の鍵マークが消えてしまうことです。
いわゆるhttpsとhttpの混在コンテンツの問題ですね。
なんかおかしい・・・
上記記事等を参考に、functions.phpに関数を貼り付けて見たんだけど、外部URLリンク取得の場合にはfavicon.ico取得時にhttp通信するらしく、サイトが部分的にhttpsでなくなってしまう事態に。
該当記事は緑の鍵マークが外れてしまいます。
いろいろ調べて、
そしてたどり着いた結論は・・・
どうやら「はてなブログカード」がSSL化に対応していないらしい
↑これ。
ここまでが今回の前フリ。
Pz-LinkCardプラグインを導入
はてなブログカードの機能、見た目はそのままに他のものに置き換えられないか。
色々探してみて、Pz-LinkCardというプラグインに落ち着いた。
見た目も制御できそうでコントロールパネルから色々できる。
functions.phpに記述して自動化
過去記事をいちいち記事を書き換えて修正は面倒くさいので、それだけは避けたい・・・
そこで、今までの過去記事に入っているリンクを自動でショートコード化して、Pz-LinkCardプラグインが読み込むようなものをfunctions.phpに記述する方針へ。
まずは下記記事を参考にfunctions.phpにurl_to_blog_card()とurl_to_hatena_blog_card()を記述。
この関数を記入すると、例えば、Wordpressテキストエディターに以下のように入力すると、こういったURL書式だけブログカードに入れ替えます。
そして、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 = '[blogcard url="'.$url.'" title="'.$title.'" content="'.$excerpt.'"]';
へ書き換えと、
url_to_hatena_blog_card()の中身の
$tag = '<iframe class="hatenablogcard" src="https://hatenablog-parts.com/embed?url='.$url.'" frameborder="0" scrolling="no"></iframe>';
を
$tag = '[blogcard url="'.$url.'" ]';
へ。
該当部分だけ、Pz-LinkCardを読み込むように変えているのみです。
※↑はショートコードのカッコが全角の[]になっていますので、そのままコピペでは動きません。
見た目をカスタマイズ
ここまでくれば、あとは見た目をはてなブログカードに近づけていけば完成。
幅は100%も指定できるのでスマホレイアウトもレスポンシブで対応できそうです。
一つ一つの記事に手を入れなくても良くなったので、とりあえず、めでたしめでたし。
最後まで読んでいただきありがとうございました!
こんな感じであまり気張らず、ダラダラと、楽しんでやっています。
どうぞよろしくお願いいたします。
もしちょっとでも!ほんのちょっとでも興味を持っていただけたなら!
下のボタンよりフォローお願い致します。
小躍りしながら喜びます!
