外部・内部用ブログカードをWordPressプラグインなしで設置

スポンサーリンク

「新型コロナウイルス」の猛威により原則テレワークとなり、明日から許可なく出社が出来なくなりました。

会社に行くのは、もう諦めました・・・・・・。

自宅だと家事・育児が加わるので仕事になりません、仕事をする気もおきません。

そして世界はもっと大変な状況です。

なお、マスクはやっぱり手に入りません。自宅に籠もるなら必要ないですが・・・。

ある知り合いに依頼されたサイト修正にて、古いVersionのWordpress、PHPを利用しているためにブログカードやAddQuickTagプラグインを導入できなかったので、各種サイトを参考に編集して実装しました。

画像付きのリンクは「ブログカード」と言うそうです。

ブログカードを作成するときには、「Pz-LinkCard」という有名なプラグインがあります。

プラグインが増えると重くなるとのことで、自作するブログが幾つかありました。

基本ググれば情報はありますが、一通りまとめたページは見つからなかったので後学のために乗せておきます。

PHP(PHP 5.2.17~7.3.15)やWordpress(3.5.1~5.4)のバージョンで動作する事を確認済です。

スポンサーリンク

OpenGraph.phpの設置

OpenGraph.phpは外部サイトのOGPタグから各種情報を取得できるようにするためのPHPファイルです。

scottmac/opengraph
Helper class for accessing the OpenGraph Protocol. Contribute to scottmac/opengraph development by creating an account on GitHub.

ダウンロード後にZipを解凍して、「OpenGraph.php」をWordPressのfunctions.phpが置いてあるディレクトリと同じ場所にアップしてください。

なお文字コード対応で、84行目付近に文字エンコーディングに関する記述を追加します。

PHP(functions.php)の書き換え

「/wp/wp-content/themes/*/functions.php」を書き換えます。

ファビコンを取得する方法まで提案されている方もいましたのでそのまま掲載しておきますが動作ません。

また、内部ブログもOpenGraph.phpを使ってアクセスしているために表示までの時間がかかります。

と言うか、公開されているどの方法も冗長なので、もろもろ大半を書き換えました。

CSSへのスタイル追加

スタイルシートは次の通りです。

通常は「style.css」に追記しますが、読み込まれていなかったので「blog.css」というファイルに記載しました。

WordPress上でのリンクの書き方

書き方は次のようになります。

書き方は容易ではありますが、タグ打ちをしない人には難しいかと思います。

このため「AddQuickTagプラグイン」を使ってクイックタグを追加する方法が取れる人はそのように対応してください。

AddQuickTagプラグインを使わず自分でクイックタグを追加

AddQuickTagプラグインを追加すると、なぜか表示画面が真っ白になりました・・・・。

仕方ないので、こちらも自作します。

クイックタグを追加するためには、

「QTags.addButton」

というAPIを使います。

この記事の方法はテキストエディタのみ反映するものになっています。

なのでビジュアルエディタにはボタンが表示されない仕様です。

他にも次のように追加できます。

タイトルとURLをコピーしました