ホーム
リンクをカードにするプラグインを作ろう！

リンクをカードにするプラグインを作ろう！

2018.08.08
この記事は約3分で読めます。

リンクをカード形式で表示させるWordPressプラグインを作成していきます。

(1)機能を考える

まずはどんなことをしたいのか考えます。

完成予想
ぽぽづれ。
 
2018.08.08
リンクをカードにするプラグインを作ろう！(1)機能を考える
https://popozure.info/20180808/13200
リンクをカード形式で表示するWordPressプラグインを作ってみましょう。この記事の対象者PHPが何となく分かっていて、WordPressプラグインの作成に興味がある方。リンクをカード形式で表示する「Pz-LinkCard」があるのは分かっているけど自分でも作ってみたい方。まず最初にまず最初にプラグインの用途や機能を決めます。今回は「リンクをカード形式で表示するプラグイン」を作ってみようと思います。Pz-LinkCardから必要最低限の機能だけ残した軽いライト版です。機能を考えるリンク先URLの指定方法リンク先のURLを指定する方法として...

(2)クラスの記述をする

プラグインの器を用意します。

ぽぽづれ。
 
2018.08.10
リンクをカードにするプラグインを作ろう！(2)クラスの記述をする
https://popozure.info/20180810/13219
プラグインのヘッダとクラス、ショートコードのフックまで記述していきます。前回まで何をするプラグインを作るかを決めました。コードを書いていくプラグインのディレクトリを作成する/wp-content/plugins ディレクトリにディレクトリを作成します。これはプラグインの名前にもなります。「ぽぽづれ。」の「ブログカード」なので、今回は「popo-blogcard」とします。プラグインのファイルを作成する今度はそのディレクトリの中にプラグインのファイルを作成します。任意の名前で良いので「plugins.php」とかでもいいですし、ディレク...

(3)cURLでサイトの内容を取得する

インターネットブラウザのような挙動をする「cURL」を使ってリンク先の情報を取得します。

ぽぽづれ。
 
2018.08.11
リンクをカードにするプラグインを作ろう！(3)cURLでサイトの内容を取得する
https://popozure.info/20180811/13236
リンク先のタイトルと概要文を取得します。前回までプラグインのひな型を作りました。今回もコードを書いていくURLパラメータを取得するショートコードが書かれたときに呼ばれるshortcodeにコードを書いていきます。第一パラメータには指定されたパラメータが連想配列で入ってきます。$url に urlパラメータで指定された文字列を入れてみましょう。class popo_blogcard { function __construct() { add_shortcode('blogcard', array($this, 'shortcode' ) ); } function shortcode($opt , $conten...

(4)OGP情報を取得する

取得したHTMLからOGPの情報を抜き出します。

ぽぽづれ。
 
2018.08.12
リンクをカードにするプラグインを作ろう！(4)OGP情報を取得する
https://popozure.info/20180812/13260
取得したHTMLからリンク先のタイトルと概要文を抜粋します。前回までリンク先サイトからHTMLを取得しました。今回もコードを書いていくOGPを取得するmetaタグからOGPの情報を取得します。get_meta_tags()を使うと簡単そうですがget_meta_tags()はnameとcontentの組み合わせしか拾ってくれません。OGPのmetaタグはpropertyとcontentなので正規表現で取りに行きます。 $html = curl_exec($ch); if (curl_errno($ch ) ) { $site_name = ''; $title = $url; $excerpt = '&#...

(5)metaタグを取得する

OGPが設定されていないサイトのタイトルと概要文を抜き出します。

ぽぽづれ。
 
2018.08.17
リンクをカードにするプラグインを作ろう！(5)metaタグを取得する
https://popozure.info/20180817/13271
引き続きリンク先のタイトルと概要文を取得します。前回までリンク先から取得したHTMLを見て、OGPの情報を取得しました。OGPが設定されていないサイトOGPが設定されているサイトは上手くタイトルと概要文が取得できましたが、facebookでのシェアを意識していないサイトはOGP情報が設定されていません。←サイト名称←タイトルhttp://www.metro.tokyo.jp/←URL←概要文titleタグとmetaタグのdescriptionを設定しているサイトは多いので、そっちを取得してみます。コードを書いていくtitleを取得するOGPのタイトルが取得できなかった場合、ti...

(6)文字コードを変換する

UTF-8以外の文字コードを使っているサイトは情報が取得できません。文字コードをUTF-8に変換します。

ぽぽづれ。
 
2018.08.18
リンクをカードにするプラグインを作ろう！(6)文字コードを変換する
https://popozure.info/20180818/13278
上手くタイトルと概要文が取れないサイトの対応をします。前回までOGPが設定されていないサイトのタイトルと概要文を取得しました。UTF-8以外の文字コードのサイト文字コードがUTF-8以外の場合、正しく文字を扱うことが出来ず、タイトルや概要文が取得できません。UTF-8に文字コードを変換すると上手く扱うことが出来ます。文字コードがEUC-JPのサイト←サイト名称←タイトルhttps://www.4gamer.net/←URL←概要文文字コードがシフトJISのサイト←サイト名称←タイトルhttps://nttxstore.jp/←URL←概要文コードを書いていく文字コードを変換す...

(7)スタイルシートを設定する

ブログカードの体裁を作ります。

ぽぽづれ。
 
2018.08.19
リンクをカードにするプラグインを作ろう！(7)スタイルシートを設定する
https://popozure.info/20180819/13307
スタイルシートを設定してブログカードっぽい見た目にします。前回まで文字コードをUTF-8にしました。スタイルシートのファイルを用意するファイルを作成するプラグインと同じディレクトリに「style.css」という名前でファイルを用意します。スタイルシートを記述するこんな感じにしてみました。文字コードは「UTF-8」です。.popo_bc_wrap { margin: 16px; padding: 8px; width: 96%; border: 2px solid #8888ff; background-color: #ffffff; border-radius: 3px;}.popo_bc_link { text-decoration: none;}.popo_...

(8)DBテーブルにキャッシュする

DBのテーブルを作成して取得した情報をキャッシュ（保管）しておくことで毎回リンク先にアクセスしなくなり、2回目からの表示が光速化されます。

ぽぽづれ。
 
2018.08.24
リンクをカードにするプラグインを作ろう！(8)DBテーブルにキャッシュする
https://popozure.info/20180824/13323
DBにテーブルを作ってタイトルと概要文をキャッシュします。前回までスタイルシートを付けてブログカードっぽくしました。DBの作成とアクセステーブルの項目を考えるDBにテーブルを作成します。記録する項目としては「URL」、「サイト名称」、「タイトル」、「概要文」です。Pz-LinkCardではこの他に「登録日」や「ソーシャルカウント」などがあります。項目名称項目名文字数URLURLVARCHAR(2048)サイト名称site_nameVARCHAR(100)タイトルtitleVARCHAR(200)概要文excerptVARCHAR(500)有効化したときに呼ぶ関数プラグインを有効化したと...

(9)サムネイルの追加

少し物足りないのでサムネイル画像を追加します。

ぽぽづれ。
 
2018.08.25
リンクをカードにするプラグインを作ろう！(9)サムネイルの追加
https://popozure.info/20180825/13334
画像生成APIを利用してサムネイルを表示します。前回までDBにタイトルや概要文をキャッシュして読み書きしました。サムネイルを取得するWordPress.comの画像生成APIを利用するWordPress.comの画像生成APIを利用します。URLの一部にサムネイルを作りたいURLを組み込み、「w」パラメータで横幅を指定します。https://s.wordpress.com/mshots/v1/(URL)?w=94 'excerpt' => $excerpt ) ); } $thumbnail = ''; $html = ''.$site_name.&...

(10)サイトアイコンの追加

サイト名称の左側にサイトアイコンを追加します。

ぽぽづれ。
 
2018.08.26
リンクをカードにするプラグインを作ろう！(10)サイトアイコンの追加
https://popozure.info/20180826/13339
サイトアイコン取得APIを利用してサイトアイコンを表示します。前回までサムネイルを表示させました。サイトアイコンを取得するGoogleのサイトアイコン取得APIを利用するGoogleのサイトアイコン取得APIを利用します。「domain」パラメータにドメインもしくはURLを指定します。https://www.google.com/s2/favicons?domain=(DOMAIN) 'excerpt' => $excerpt ) ); } $site_icon = ''; $thumbnail = ''; $html = ''....

(11)テキストリンクだけの行をブログカードにする

一行まるまるテキストにリンクを設定しただけの行をブログカードに変換するので普段はショートコードを使わなくて済みます。

ぽぽづれ。
 
2018.08.31
リンクをカードにするプラグインを作ろう！(11)テキストリンク行を変換
https://popozure.info/20180831/13519
テキストにリンクが設定されただけの行をブログカードにします。前回までサイトアイコンを表示させました。テキストリンク行を変換するフィルターの設定記事の内容を取得するときのフィルターを設定します。 function __construct() { add_shortcode('blogcard', array($this, 'shortcode' ) ); add_action('wp_enqueue_scripts', array($this, 'enqueue' ) ); add_filter('the_content', array($this, 'filter_content') ); register_ac...
タイトルとURLをコピーしました