KUHAKU
no
MEMOCHO

プラグイン不要!ワードプレスでURLから簡単にブログカードを挿入できるショートコードの作り方

プラグイン不要!ワードプレスでURLから簡単にブログカードを挿入できるショートコードの作り方のサムネイル

ワードプレスって書いていくうえでこういう機能あったら便利なのになって思うことがちょくちょくあります。
でもオープンソースのワードプレスにはそういう便利な機能が付くのは時間がかかるのです。

それでも欲しい!なきゃ無料ブログサービスのほうが記事書くの楽!あーもう移行する!

なんて考えが頭をよぎった時は一度考え直しましょう。

そうだ、その機能作っちゃいましょう。

ブログカードの作成手順

ということで今回は他サイトをご紹介する際に簡単にブログカードを挿入できたらいいのになという思いから実際に実装してみることにしました。

ブログカードの需要はやはり記事作成時なので今回はショートコードで使用できるような仕様にしました。

OpenGraphのダウンロード

ブログカードを作成していくにあたって、URLからmetaタグのOGPを取得するために、今回はPHPスクリプトのOpenGraph.phpを使用します。

OpenGraphのダウンロードはこちらから→GitHub

ダウンロードが完了したら、その中からOpenGraph.phpというファイルを探し、ワードプレスの適用テーマフォルダ直下に配置します。

ここで、配置したOpenGraph.phpを少し編集します。
85行目あたりを探して以下の一文を挿入します。

これをしないとOGPを取得後、日本語が文字化けしてしまいます。

ショートコード関数の作成

さて、ファイルの準備ができたら使用できるように実装していきます。

まずは、functions.phpを開き、ショートコードを作成する関数を書いていきます。

ショートコードの作成方法は、また別記事で詳しく紹介しますが、上記の関数でblogcardというショートコードが使用できるようになります。

処理の記述

それでは、ショートコードの処理を書いてブログカードを利用できるようにしましょう。

これで、URLから簡単にブログカードを表示するショートコードが完成しました!

ちなみに、今回のCSSは以下のようになっています。

実際に使用する

完成したら早速使ってみましょう!

記事の中でショートコード「blogcard」を使用してURLを囲んであげればOKです。

これで以下のようなブログカードができました。
↓↓

ブログ上でのソースコード表示をエディタ風にカスタマイズする方法【Crayon Syntax Highlighteの使い方】 | KUHAKU no MEMOCHO
kuhaku.org

おまけ

あとは簡単に使用できるようにAddQuicktagなどでクイックタグにショートコードを設定しておけば記事を書いている最中に簡単に使用できるようになります。

コイツの使い方はまた別記事で書いていきますね。

今回は、WP_Queryシリーズの途中になりましたが、実装ついでだったので許してください。

今後もこんな感じで何かを実装する際は自分のメモ代わりに記事にしていこうかと思います。

FB Comment