外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公開しています。
このプラグインで使っているスタイルシートを自動生成する仕組みについて。
[2015/08/22追記]公式プラグインディレクトリにて公開しました。ダッシュボードからインストールやバージョンアップが行えます。
このプラグイン、実は何もしてないんです…
まずは性能的な言い訳を。
このプラグインは指定されたURLを、「はてなブログ」の「はてなブログカード」という機能を使うためのURLへ置き換えるだけのプラグインです。
リンク先サイトのサムネイル画像を取得したり、タイトルや抜粋文を取得してくれているのは、全て「はてなブログ」さんです(^-^;
このプラグインの醍醐味は、「『はてなブログカード』を使うURLを書く手間が省ける」というところです。
そこにオマケとして、ちょっと枠線に手を加えたりできるところです、か。
この「はてなブログカード」は、常に「新しいウィンドウで開く」動作をするので、サイト内のリンクでもウィンドウがどんどん開いてしまいます。
そこで、サイト内リンクのときだけ、自前であれやこれやして、「はてなブログカード」みたいに表示させたりしています。
設定変更による負荷を少なくしたい
キレイなブログカード形式でリンクが表現できるようになったのは良いですが、今度は「自分のサイトっぽさ」を出したくなるものです。
「青基調のサイトだから、サイト内リンクは空色にしたい」とか、「デザイン重視のサイトだから、ブログカードにも影を付けて立体的に表現したい」とか。
そんなこんなで、表示するだけの「popo-HatenaBlogCards ver0.27.1」から、設定画面がついた「Pz-HatenaBlogCard ver1.0.x」へと。
ちょっぴり「プラグインっぽく」なってきました。
とはいえ、WordPressのプラグインとかphpとか、ほとんど触ったことが無いので四苦八苦です(^-^;
そんな話はさておき、設定画面をつくって、色や枠線の太さ、角まるめ、影つけといった、見た目が変更できるようになりました。
でも、ブログカードを表示する度にパラメータを確認して、styleパラメータを埋め込んで…というのでは非効率。
それに、「リンク先を記述するのにラクだから使いたいけど、スタイルシートは自分で設計した複雑なのを使いたい」とかいうときに対応できなくなってしまいます。
そこで、「色とか書式的なものは全部スタイルシートで行う」ことにしました。
いや、「何、当たり前のこと言ってるんだ？Σ(ﾟロﾟ)oﾞ」って感じですね(^-^;
「スタイルシートで」というか、「<div style=”background-color: #fff; border: 2px solid #666;”>～</div>」みたいに、HTMLタグに埋め込むのでは無くて、「CSSファイルを読み込むだけにしよう」という意味です。
設定変更するとCSSファイルを作成する
このプラグインは、設定画面で「設定を保存」ボタンを押したときにCSSファイルを作成しています。
流れとしては、
- 設定ボタンを押したら「pz-hatenablogcard-style.php」が呼び出されて実行される。
- テンプレートとして「pz-hatenablogcard-style.tmp」を読み込む。
- 設定に従って定型文（コメント形式）を置き換える。
- 「pz-hatenablogcard-style.css」として保存。
という感じ。
普段、記事を表示しているときは、スタイルシートを読み込んでいるだけで、背景色を変えたり、角まるめとか影をつけるための処理は行っていません。
処理しながらHTMLタグにstyleを埋め込んでも、サーバー負荷とかはほとんど変わらないとは思うのですが、読み込むテキストの量とかは減っていると思います。（多分）
CSSファイルの生成、置き換えの仕方
毎回毎回、「pz-hatenablogcard-style.tmp」というファイルを読み込んで、一部を置き換えて「pz-hatenablogcard-style.css」として保存します。
なので、「pz-hatenablogcard-style.tmp」を直しておけば全体に関わるスタイルを設定できます。
置き換えする部分は、コメントの形で書き込んでおきます。
/*LINKCARD_WRAP_MARGIN*/
「pz-hatenablogcard-style.php」というプログラムの中で、設定されたオプションを確認しながら、必要なものを置き換えていきます。
preg_replaceで、決まったキーワードを拾って置き換えていきます。
（正規表現が必要な複雑な置き換えはしていないので、str_replace の方が適切でした(^-^;）
例えば、この状態から、
.linkcard-internal-wrapper {
/*LINKCARD_WRAP_MARGIN*/
/*BORDER*/
/*RADIUS*/
/*SHADOW*/
/*WIDTH*/
/*IN-BGCOLOR*/
line-height: 100%;
}
- 「中央寄せ」をしない場合、「/*LINKCARD_WRAP_MARGIN*/」を「margin: 12px 0;」に置き換え。
- 「枠線の太さ」を「黒／普通」にした場合、「/*BORDER*/」を「border: 2px solid #444;」に置き換え。
- 「横幅」に「90%」を指定した場合、「/*WIDTH*/」を「max-width: 90%;」に置き換え。
- 「内部リンク／背景色」に「#bdf」を指定した場合、「/*IN-BGCOLOR*/」を「background-color: #bdf;」に置き換え。
と置き換えしていきます。
結果として、「pz-hatenablogcard-style.css」は以下のように出力されます。
.linkcard-internal-wrapper {
margin: 12px 0;
border: 2px solid #444;
/*RADIUS*/
/*SHADOW*/
max-width: 90%;
background-color: #bbddff;
line-height: 100%;
}
設定により変更しない部分はコメントのままなので、表示に影響はしません。
最初はCSSファイルの中身を全部プログラムの中に書いて、オプションを読みつつ出力していく形を考えたのですが、基本となるCSSをちょっといじるとエラーになったり、面倒そうだったので、置き換えする方法にしました。
そんなに珍しい手法では無いとは思いますが、自分で修正しようと思っている方へのヒントとなれば良いなと思います。
設定画面をもっとスマートに作りたい…
設定画面の作り方が全然分からず、かなり手探り状態で作りました。
めっちゃ色んなサイトさんを参考にしました。
だらだらと縦に長い設定画面になってしまったので、タブとかで切り替えられるようになりたいです。
バージョンアップのたびにダウンロードしてインストールしなおしてもらうのも大変そうなので、プラグインディレクトリにも登録してみたい気がします。
あと、デバッグモードにしてみたら結構な数のエラーが出ました。
変数とか宣言しないで使ってよいとか真に受けて作っていたものの、やはりお行儀が悪かったようです(^-^;
道のりは長い…。
コメント
ぽぽろん様こんばんは。
以前コメントさせていただいたrubyです。
ブログカードのプラグイン、早速最新版を使わせていただきました。
見た目はもう最高ですね。私自身このはてなタイプはクリックしやすくて好きだったので、それをブログに設置できるのはとても嬉しいです。
簡単にですが、私（と仲間の共同執筆）のブログにも紹介させていただきました。技術的なことはわからないので、あっさりとした紹介ですが、今後共どうぞよろしくお願いいたします。
※記事をお見せするのにURLを貼っていますが、発リンク的な意味で、リンクは削除いただいても結構ですｗ
ruby さん、コメントありがとうございます。
好評いただけているようでありがたいです(^-^)o
自分で作成される方の手助けになればと思い、なるべく中身的なことも書いてはいますが、利用される方は難しいこと考えないで使えるのが良いと思っています。
紹介もありがたいです。
何か不具合などございましたら、お気軽にコメントでどうぞ♪