「なんかワケわかんないくらいWordPressが重くなって…ナンデー！Σ(ﾟロﾟ)oﾞ」というお話し。
2015年8月中旬くらいからどんどん表示が遅くなり、下旬頃には『500 Internal Server Error』やら『503 Service Temporarily Unavailable』やらまでも出るように…(^-^;
「これはイカン！Σ(ﾟロﾟ)oﾞ」
ということで、データエクスポート、別ディレクトリにWordPressインストール、データインポート。
今のところ、何とか、軽くなった気がします…。
カスタムフィールドがうまくインポートできずに苦戦しましたが、とりあえず、PostViews の views は何とかしました(^-^;
SNS Count Cache は一回クリアするしか無いかな…。
続く。
前→ver1.1.0～ver1.1.4 次→ver1.2.0
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」。
ver1.1.7を公式プラグインディレクトリにて公開しました。
ダッシュボードから更新すると今まで使用していたCSSが消えてしまい、カードを表示すべき場所が文字のみになってしまう不具合を修正しました。
ダッシュボードからプラグインを更新すると、ディレクトリ（フォルダ）の中は全部一掃されるため、設定時に作成されたCSSは削除されてしまうため、更新後、設定画面で保存をしない限り、CSSが無い状態になっていました。
「/wp-content/plugins/pz-hatenablogcard」ディレクトリ内は更新するたびに全て消えてしまうので、とりあえず「/wp-content/uploads/pz-hatenablogcard」ディレクトリにCSSを作成されるように修正しました。（このuploadsディレクトリは、ファイルを生成する他のプラグインでも一般に使われる場所です。記事の画像もこの配下です。）
1.1.6以前から1.1.7以降へ更新する場合には、CSSが消えてしまうので、初期設定のCSSを付属して対処しました。
装飾を復活させる場合、設定画面から「変更を保存」を押して、CSSを作成し直してください。
プラグインの更新時にも「register_activation_hook」が動くようなつもりでいたのですが、これはインストールして初めて有効化した場合や、手動で停止→有効化した場合に動くもののようです。
自分のサイトではダッシュボードから更新することがまず無いため、気付いていませんでした。
更新したときにも走るフックを調べたいのですが、「公式ディレクトリから更新する」という状態を作り出せないため、どうして良いやら分かりません。
plugin update hook とかがあれば、よいのですが無さそうです。
DBに格納しているバージョンと常に比較して、変わっていたらアクションを起こすのが一般的なようですが、処理速度も含めて検討したいと思います。
uploadsにファイルを作成する方法でないと、更新時に数秒～数十秒、スタイルシートがない時間ができてしまいます。
あとは不要時にディレクトリごと削除するかどうかなのですが…削除処理を書くのってこわいですね…。
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。
URLが記述されたショートコードを取得するブックマークレットを用意しました。
[2015/09/19追記]タイトルと抜粋文も取得するブックマークレットも用意しました。
https://popozure.info/20150919/8974
「Pz-HatenaBlogCard」の記事に、
↑この形式を出力するブックマークレットなどはつくられてはいないでしょうか？
というコメントをいただきました。
標準のショートコード「blogcard」は少々長めですが、分かり易さを第一にこのショートコードになっています。
（「長い！」っていう場合には、設定画面からショートコードの文字を1文字とかにも変更できます♪）
ほかにも「他のプラグインのショートコードと被ってなさそう」というので決めたのですが、WordPressテーマ「Simplicity」で「blogcard」という名前のショートコードが使われているようです(^-^;
とはいえ、どちらもブログカード形式のものを表示する機能なので、おそらく同時に使うことは無いと思うので、バッティングは無い…はず。
（両方使いたいっていう場合には、設定画面からショートコードを変更できます♪）
JavaScriptは得意で無い方ですが、
[html title=”ショートコード取得” decode=”true” wrap=”true”]javascript:window.prompt(‘getBlogCard’,’
このブックマークレットを実行すると、「 」という文字をくっつけたものを、確認用のウィンドウに表示させます。
この文字を [Ctrl]+[C] か右クリック→「コピー」を選んでコピー。
今度は、記事側で [Ctrl]+[V] か右クリック→「貼り付け」を選んで貼り付けをします。
大して短縮にはなりませんが、1行だけなら「void」で囲っちゃうのもありかも知れません。
[html title=”ショートコード取得” decode=”true” wrap=”true”]javascript:void(window.prompt(‘getBlogCard’,’
どうして「void(0);」を書くのかなーっと思ったら、ブックマーク機能を使用して開いているので、ブックマークレットを実行すると、ページが空のページへ移動してしまったりしました。
「ブックマークとしての結果は void だよ」というのを返すために、「void」（何もしない）を書く必要があります。（無くても大丈夫なときがあるんだけど、Chromeだから？）
そもそも「少しでも手間を省く」ためのプラグイン。（ショートコードを書くだけで、iframeとか書かなくていい！）
そして、「少しでも手間を省く」ためのブックマークレット。（
とか自分で書かなくていい！）
それなら、[CTRL]＋[C] を押す手間も惜しんでみたいものです！Σ(ﾟロﾟ)oﾞ（CTRL＋Cとか押したくない！）
というわけで、クリップボードに直接コピーされるのも考えてみました。
javascriptには、クリップボードを扱う clipboardData オブジェクトがあります。
・window.clipboardData.setData()
【機能】 指定フォーマットのクリップボードデータをセットします。[link url=”http://www.red.oit-net.jp/tatsuya/js/clipboardData.htm”]
基本的にはこれの setData メソッドでクリップボードにコピーされるはずなのですが…。
[html title=”ショートコード取得” decode=”true” wrap=”true”]javascript:window.clipboardData.setData(‘Text’, ‘
コピーされませんでした。
Chrome を始め、多くのインターネットブラウザでは clipboardData オブジェクトは使えなくなっているようです。
（そういえば、一昨年くらいの記事を書く時に「ボタンを押したら javascript でテキストをコピーしたい」と思ったものの、そのとき既に clibboardData が使えなかった気がします。）
見えないフィールドにクリップボードの内容を javascript で貼り付けされて、気付かない内に送信されたりすると危険ということで、各ブラウザでクリップボードへのアクセスを制限しているのだと思います。
最近のバージョンの Chrome では、execCommand を使うことでクリップボードのコピーができるという情報があったのですが、この execCommand は、ページに表示されている文字列が選択されている状態のものをコピーするようで、任意のテキストをコピーすることは出来ないようです。
「ページに表示されている文字列が選択されている状態」ならばコピーできるということで、あちこち調べつつも、遊んでいたらまったく実用的じゃないコードができました。
このブックマークレットを使うと表示中のページが全部消えて、ショートコードだけ表示されます。（でも、クリップボードにコピーがされます。Chrome44で確認。）
[html title=”ショートコード取得” decode=”true” wrap=”true”]javascript:var d=document;d.body.innerHTML=’
[F5] を押して更新すればまた画面が出るのですが…「コレジャナイ」って感じですね(^-^;
さらにあれこれ調べていたところ…。
テキストエリアをフェイクで作ってそこにテキストを格納してコピー
その後、フェイクのテキストエリアを消す。
[link url=”http://tande.jp/lab/2012/09/1889″]
こ、これだ…！Σ(ﾟロﾟ)oﾞ
でも、このままブックマークレット化しても動かなかったので、この構想を元に、あれこれやってみます。
そして、
で、出来た…！Σ(ﾟロﾟ)oﾞ
クリップボードが直接使えなくなった経緯とかも考えると利用はしない方が良いのかも知れませんが、この辺はもう知的好奇心といいますか。
ブックマークレットの中身はこんな感じです。
[html title=”ショートコード取得” decode=”true” wrap=”true”]javascript:(function(d){var e=d.createElement(‘textarea’);e.id=”pz-hbc-sc”;e.innerHTML=’
そして、何かの役に立てばと思うので、解説してみます。
[html title=”ショートコード取得” decode=”true” wrap=”true”]function(d) {
var e=d.createElement(‘textarea’);
e.id=”pz-hbc-sc”;
e.innerHTML=’
関数にしておいた方が、変数名が他と被った時にややこしいことになっちゃうので、「関数化した方がよい」という情報があったので関数として記述しました。
よく使う長いオブジェクト名とかもパラメータにしちゃった方がよい場合があるとのこと。
今回も、8文字の「document」が3回出てくるので、「24文字」→「11文字」と、13文字くらい短縮されました。（ん？今回は微妙？）
こちらに Tips があって、分かり易かったです。
特に多くのページで利用されるブックマークレットは、平凡な変数名だと既に存在する変数名とバッティングする可能性が高いので…
[link url=”http://qiita.com/xtetsuji/items/e8b61bb39c41b7a9345e”]
一応、やりたかったことが出来て満足。
JavaScript を多用しているサイトとかで使うと、
みたいな動作をして、動かない場合があるので、一応「非推奨」ということにしておきます(^-^;
公開の前に、「半角スペース」は「%20」、「半角ダブルクォート」は「%22」にエスケープしたりしておきます。
この辺は、こちらのサイトさんが javascript → ブックマークレット にするときの手順がきれいにまとまっていました。
所定の形式に体裁を整えてあげる必要があります。
[link url=”http://bookmarklet.dohow.jp/createbookmarklet.shtml”]
さて、アップロードの方法ですが、「jsファイルにしてアップロードしてダウンロードしてもらう？」とも一瞬考えたものの、「ブックマークレット」ということを考えると違う気がします。
ブックマークレットは、ブラウザのお気に入りに「URL」の欄に記入することで動作するものです。
「きっと普通に <A> タグでいいんじゃね？Σ(ﾟロﾟ)oﾞ」
ということで、貼り付けてみます。
[html title=”ショートコード取得” decode=”true” wrap=”true”]<a href=”javascript:void(window.prompt(‘getBlogCard’,’
‘));”>getBlogCard</a>[/html]↓こちらのリンクを「クリックして開くのでは無く」、ブックマークバーへ「ドラッグ」して登録してください
| [direct]<a href=”javascript:void(window.prompt(‘getBlogCard’,’ ‘));”>getBlogCard</a>[/direct] |
貼り付けられました。
ここからちゃんと登録とかもできるようです。
最初、ダブルクォートをエスケープするのを忘れてしまって、途中で途切れたりしました…(^-^;
下のリンクにブックマークレットとして使用できるJavaScriptが書かれています。
| [direct]<a href=”javascript:void(window.prompt(‘getBlogCard’,’ ‘));”>getBlogCard</a>[/direct] |
使用するためには、まずこのブックマークレットをブックマークに登録します。
登録するときは、
使うときは、
ブックマークレットの登録の仕方とか使い方とか、こちらの「increment Log」さんを参考にさせていただきました。
functions.phpファイルにソースコードを記述し、記事編集画面にショートコードを入力するとサムネイル付きの外部リンクHTMLが生成される、といったモノです。めっちゃ使いやすくて感謝してます。んで、このショートコード用に専用のブックマークレットを用意したワケなんです。
[link url=”http://increment-log.com/link-thumbnail-bookmarklet/”]
このブックマークレットは、「アンギス」さんというところの「サムネイル画像つきリンクを表示させるショートコード」に対応したものです。
ショートコードで実装すれば、もしもの時も最低限の変更で済みますのでね。
記事内で外部サービスを呼び出すのはちょっとリスクが高いですハイ。
[link url=”http://unguis.cre8or.jp/web/1385″]
設定画面で「ショートコード」もしくは「ショートコード 2」に「bm」を設定すれば、increment Log さんのところのブックマークレット「GetLinkCode」で生成されたショートコードを使うことが出来ました。
（ショートコード～閉じショートコード の間の文字列は表示に影響しないので、そのままで大丈夫でした。）
とりあえず、ダイアログ出すやつはささっと出来たのですが、クリップボードからの取得をやってみたくて遊んでみました。
と、ここまでやって何ですが、Pz-HatenaBlogCard は、設定画面でショートコードが変更できます。
「blogcard って文字が長いからブックマークレットを使いたい！」という場合は、ショートコードそのものを短くして [bc] とか [a] とか [b] とか [c] とかにする方法もあります。
また、今まで [○○○ url=””] 形式のショートコードを取得するブックマークレットを使っていたならば、ショートコードをそれに合わせてしまう方法もあります。
ちなみに、 [○○○ url=””]本文[/○○○] という形式でも問題ありません。（ショートコードの閉じまでの処理は WordPress の方がやってくれるので。）
おや、なんか「まとめ」になっていない…。
いやはや、いつも思うけど、インターネットありがたや！みなさま、すばらしや！Σ(ﾟロﾟ)oﾞ
では(^-^)o
前回の続き。
WordPress.org公式プラグインディレクトリへプラグインを登録してみました。
経験としても「WordPress.org公式プラグインディレクトリへの登録」をしてみたかったのですが、リンクをはてブカードにする「Pz-HatenaBlogCard」が、そこそこあちこちで使ってくれているようなので、これを機に登録してみようと思いました。
最初の登録のときは、外部URLへ情報を送る WebAPI の部分が指摘されました。
[link url=”https://popozure.info/20150819/8247″]
指摘に従い、プログラムとドキュメントの修正を行ったところ、無事通過。
[link url=”https://popozure.info/20150819/8270″]
翻訳サービスに英文つっこんで、「1時間以内にアクセスしてね！」って感じになって焦って「なんですとー！？Σ(ﾟロﾟ)oﾞ」と慌てて、SVNクライアントのインストールとかしたものの、よくよく読んでみると「1時間以内にアクセスできるようになるからアクセスしてね！」みたいな文面だったことに気付いて、ぐったり。
というのが前回までのお話し。
まずは「SVNクライアント」というのをインストールする必要があるようです。
「SVNってなんだ？Σ(ﾟロﾟ)oﾞ」
この辺は完全に素人で、一歩ずつつまづきます。
「SVN（；Subversion；サブバージョン）」は、CollabNet社というところが開発したバージョン管理システムらしいです。
[link url=”http://e-words.jp/w/SVN.html”]
それに対応したクライアントをインストールする、ということです。
コマンドラインで使用するCUI（；キャラクターユーザーインターフェース）のものやら、GUIのやら、いくつかあるようです。
プラグイン登録の参考にさせていただいたサイト様で使用している「TortoiseSVN」を使ってみようと思います。
[link url=”http://yyengine.jp/blog/yyengine/wp-plugin-add/”]
ダウンロードは、TortoiseSVNの日本語情報サイト「TortoiseSVN プロジェクト日本語トップページ」から行います。
[link url=”http://osdn.jp/projects/tortoisesvn/”]
最新版っぽい「TortoiseSVN-1.9.0.26652-x64-svn-1.9.0.msi」をダウンロードしてインストール。
TortoiseSVNのインストールが終わったら、日本語パックもインストールします。
「最新ダウンロードファイル」の中には「日本語パック」が無かったので、「ダウンロードファイル一覧」の「その他全ファイル」の「1.9.0」の「Language Packs」中から「LanguagePack_1.9.0.26652-x64-ja.msi」を見つけてダウンロードしてインストール。
（いずれもWindowsが64ビット版の場合。32bitの方は「TortoiseSVN-1.9.0.26652-win32-svn-1.9.0.msi」と「LanguagePack_1.9.0.26652-win32-ja.msi」を使います。）
とりあえず、開発に使うフォルダを作成して、その中にプラグイン名「pz-hatenablogcard」の空フォルダを作成。
空フォルダのまま、それを右クリックして「SVNチェックアウト」。
WordPress.orgのメールで送られてきた「リポジトリのURL」とかを入れます。
そうすると、「リポジトリ」というところと同期されて、「assets」やら「branches」やら「tags」やら「trunk」やらのフォルダが作成されます。
ここで初めて、「trunk」にプラグインフォルダの中身を放り込みます。
この辺りは、こちらのページが分かり易かったです。ありがたや。
[link url=”http://yyengine.jp/blog/yyengine/wp-plugin-add/”]
基本的な手順は、「trunk」フォルダに一式放り込んで、「SVNコミット」をして同期するだけ。
数分で公開されるはずなのですが…(^-^;
待てど暮せど公開されません。
プラグインの新規追加から検索しても出ないし、WordPress.orgのプラグインのページを直接開いても、「ダウンロード」のボタンがありません。
[link url=”https://wordpress.org/plugins/pz-hatenablogcard/”]
「WordPress 公式プラグインディレクトリ 公開されない」とかで検索しても、それっぽい事例が見つかりません(^-^;
疑わしいのは「Readme.txt」。
「Readme.txt validator」（Readmeファイル検証）でチェックしてみました。
[link url=”https://wordpress.org/plugins/about/validator/”]
下のテキスト欄に、Readme.txtの全文をコピー／貼り付けして、
「Validate!」ボタンを押します。
じゃーんΣ(ﾟロﾟ)oﾞ
警告（Warnings）ではありますが、「『Stable tag』が無いよ（Stable tag is missing.）」ってなっています。
「Stable tag」のところには、プラグインのバージョンを記入するらしいです。（多分、「安定版のバージョンを記入する」が正解。tagsにコピーしたのと同じのを書くのかも？）
「ヒント：もし、trunk が安定版なら、『Stable tag: trunk』と書く」と書いてある気がしたので、「Stable tag: trunk」を追加しました。
Readmeジェネレーターで作成して、審査も通ったので、Readme.txtは問題無いだろうと思っていましたが、ここでつまずいていました。
今度は気付いたらプラグインの検索に表示されるようになりました。
こういうところに表示されると、「何か自分のやつじゃないみたいΣ(ﾟロﾟ)oﾞ」とか思ってしまいますね。
では(^-^)o
[amzn-link asin=”B01N33HG6H”][amzn-link asin=”B00M939Y0I”][amzn-link asin=”4798126128″][amzn-link asin=”4798143774″][amzn-link asin=”4295002011″]
はてなブログのAPIとか、ファビコン取得APIとか、どういう位置づけなのかな？不思議。（考えてはいけないのかもしれない）
「はてなブログoEmbed API」というのが公開されています。
[link url=”http://staff.hatenablog.com/entry/2014/09/03/153938″]
これは、「はてなブログ」の記事情報をAPI経由で取得することができるAPIです。
oEbedという仕様にそって使えば、ブログのタイトルや記事抜粋文など、記事情報が取得できます。
「Hatena Developer Center」に「はてなブログ oEmbed API」の仕様があります。
[link url=”http://developer.hatena.ne.jp/ja/documents/blog/apis/oembed”]
これによれば、エンドポイントは「http://hatenablog.com/oembed」。
urlパラメータを与えてあげれば、json形式でデータが取得できます。
[html decode=”true” wrap=”true”]http://hatenablog.com/oembed?url=http://staff.hatenablog.com/entry/2014/08/29/141633&format=json[/html]
↓取得結果
[php decode=”true” mark=”9″]{
“author_name”: “hatenablog”,
“width”: “100%”,
“author_url”: “http://blog.hatena.ne.jp/hatenablog/”,
“provider_url”: “http://hatenablog.com”,
“version”: “1.0”,
“provider_name”: “Hatena Blog”,
“height”: “190”,
“html”: “<iframe src=”http://staff.hatenablog.com/embed/2014/08/29/141633″ title=”はてなブログの記事を紹介しやすくしました。URLを貼るだけで、コンパクトに整ったブログカードを貼り付けることができます – はてなブログ開発ブログ” scrolling=”no” frameborder=”0″ style=”width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;”><a href=”http://staff.hatenablog.com/entry/2014/08/29/141633″>はてなブログの記事を紹介しやすくしました。URLを貼るだけで、コンパクトに整ったブログカードを貼り付けることができます – はてなブログ開発ブログ</a></iframe>”,
“url”: “http://staff.hatenablog.com/entry/2014/08/29/141633”,
“title”: “はてなブログの記事を紹介しやすくしました。URLを貼るだけで、コンパクトに整ったブログカードを貼り付けることができます”,
“type”: “rich”
}[/php]
このjsonデータの中には、「はてなブログカード」を表示させるための「HTML」が含まれています。
それを切り出してあげると、はてなブログカード内で見かける「アレ」を表示することが出来ます。
このjsonデータというか、はてなブログoEmbed APIは、はてな内だけでなく、WordPressなどでも使用できますが、取得できるサイトは「はてなブログ」だけのようです。（独自ドメインを使用していても「はてなブログ」のサイトなら取得できるっぽいです。）
「はてな」であっても、例えば「Hatena Developer Center」のページとかは「はてなブログ」では無いので、このAPIでは取得できません。
取得できた場合は、この HTML を切り出してくれば「はてなブログ」のidとロゴが入った形式のカードが簡単に表示できます。
といった内容は、今まで参考にさせていただいたあちこちのサイト様に書いてはあったのですが、あれこれ調べて、自分で実験して、ようやっと自分がここまで理解して来た感じです(^-^;
趣味グラマーなので理解して作るより、作って理解してくる方が多かったりします(^-^;
「Embed」は英語の発音的には「エムベド」もしくは「イムベド」？
とりあえず日本語的には「エンベッド」とかでいいと思うのだけど、「oEmbed」は「オーエンベッド」って読むのでしょうか？(^-^;
「Hatena Keyword」では「おーえんぶど」だと書いてました。
なんだか、ポケモンの「ほのお」「かくとう」タイプでそんな感じの名前のやつがいそうな気がします。
さて、「oEmbed」の「o」って何でしょう？「Embed」は「埋め込み」なので、「o」は外部（outside、outer、outebound）だろうか？
オブジェクトっぽい雰囲気もあるけど、違う気がする…？
oEmbedのサイトを見ても、結局、先頭の「o」は何だかよく分かりませんでした(^-^;
[link url=”http://oembed.com/”]
それはさておき。
「はてなブログ」で記事を書くときに内部向けのツールを使うと、はてな内でよく使われる「Hatena Blog」のロゴとidがある「ゴージャスなブログカード」では無く、シンプルで「コンパクトなブログカード」が作成できます。
それとほとんど同じものが、「http://hatenablog.com/embed?url=」を使うことで生成されるようです。
たとえば、「http://hatenablog.com/embed?url=https://popozure.info/20150816/8182」にアクセスすると、こんなページが表示されます。
はてなの記事を書くときに使うツールとはアドレスが違うものの、結果は同じもののように見えます。
そして、はてなブログ内部じゃなくても特に制限がかからないため、iframeで記述してページに埋め込む方法とか、そんなiframe記述を作成するブックマークレットとかを色々な方が公開しているようです。
当サイトで公開している「Pz-HatenaBlogCard」もこの仕組みを利用して外部リンクを表示しています。
「はてなブログ」以外から、「はてなブログ」の記事を紹介できる「はてなブログ oEmbed API」。
「はてなブログ」内部から、OGPを使用している外部サイトを紹介できる「コンパクトなはてなブログカード」（正式名称分かりません(^-^;）。
この2つは似ているようで別のものです。
はてな開発ブログのコメントを見てみると、「oEmbed APIは、はてなブログの情報を、ほかのサイトから利用してもらうために提供」しているもので、「ブログカードのOGP対応は、ほかのサイトの情報を、はてなブログで利用するために拡張」しているものと書かれていました。
どうやら、両方が合わさったものは「提供している状態では無い」感じですです。
そして、前者のAPIから返されるHTMLはそのまま利用して良いと思いますが、後者についてはー…？
薄々気づいてはいたものの、これ、使ってていいのかな！Σ(ﾟロﾟ)oﾞ
と、自分もようやっと先人たちが言っていることに追いついて来た気がします(^-^;
ちなみに「はてブ数API」は、「ブログパーツを設置してみましょう」というページから、HTMLを生成して、他者ブログに貼り付ける想定になっています。
[link url=”http://b.hatena.ne.jp/guide/blogparts”]
WordPressは選択肢に無いのですが、テーマファイルとかが多岐に渡ってしまうので仕方が無いのかも知れません。（「WordPress使うなら、Hatenaにおいでよ！」っていう隠れたメッセージなのかも知れませんが。）
ファビコン取得も「はてな」の「Hatena::Favicon」を利用していますが、こっちは「ご自由に使ってください」といった案内は出ていないものだったりします。
長年使われているので、公に使っていいよとも言えないけど、黙認してる状態なのでしょうか…(^-^;
と、とりあえず、みなさんも使っているということで様子見。
「こういう使い方ダメー！」って言われたら、ちょっと考えます(^-^;
一応、自前で記事とか取得する「Pz-LinkCard」は、…その時に本気出します(^-^;
では(^-^)o
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。
「サブメニュー」からだけでは無く、「プラグイン画面」のプラグイン名のところのメニューにも「設定」を追加したいです。
プラグイン画面のプラグイン名のところに小さいメニューがあって、無効化されているときには「有効化｜編集｜削除」の3つが表示されています。
有効化したときに設定画面へ飛ぶ「設定」を追加したいと思いました。
「WordPress プラグイン 一覧 設定へのリンク」とかで検索しても、見つかりません(^-^;
他のプラグインさんとかを見たところ、「add_filter ()」を使うようです。
[php decord=”true”]add_filter(‘plugin_action_links’,’add_action_links’);[/php]
「plugin_action_links」が「プラグインのページに表示するリンクのリストに適用」ということらしいので、ここが「停止｜編集」とかの設定のようです。
このプログラムだと、第二パラメータと自身のプログラム名を確認して、一緒だったら「Settings」を追加しているようです。
[php start-line=”2″ decord=”true”]function add_action_links ( $links , $file ) {
if ($file == plugin_basename(dirname(__FILE__).’/sample.php’)) {
$add_link = ‘<a href=”options-general.php?page=sample_options”>Settings</a>’;
array_unshift( $links, $add_link);
}
return $links;
}[/php]
array_unshift()を使っているので、一番前に追加されて「Setting｜停止｜編集」と表示されていました。
これからすると、プラグインを表示して小さいメニューを表示させる度にフックされて、配列の中身はそのプラグインのメニューだけが入っているようです。
実際に、print_rで出力してみたところ。
[php decode=”true”]file=pz-hatenablogcard/pz-hatenablogcard.php
link=Array ( [deactivate] => 停止 [edit] => 編集 )
file=pz-linkcard/pz-linkcard.php
link=Array ( [activate] => 有効化 [edit] => 編集 [delete] => 削除 )[/php]
登録されているプラグインの数だけフックされてきました。
有効化されていても、無効化されていてもフックされてきます。
自分かどうか確認して、一緒だったら配列に「<a href=”options-general.php?page=プラグイン名“>設定</a>」を加えてあげれば良い、ということのようです。
（「自分かどうか」の確認をしっかりしないと、全プラグインに自分のプラグインの設定ページへのリンクが付いてしまいます。ver1.1.2では誤った実装をしてしまい、全プラグインのところにPz-HatenaBlogCardの設定へのリンクが表示されてしまいました。）
「plugin_action_links」でフックをすると、全てのプラグイン名が表示されるときにフックがかかります。
これでは間違って、ほかのプラグインのところに何か表示してしまったりしそうです。（実際、してしまいました。）
「plugin_action_links_プラグインベース名」でフックすれば、そのプラグインのときだけフックがかかるようです。
[php decord=”true”]add_filter(‘plugin_action_links_’.plugin_basename(__FILE__) , ‘add_action_links’);[/php]
これで、配列の最後にオプションページへのリンクを追加すれば、「停止｜編集｜Settings」という感じに表示されます。
[php start-line=”2″ decord=”true”]function add_action_links ( $links ) {
$links[] = ‘<a href=”options-general.php?page=sample_options”>Settings</a>’;
return $links;
}[/php]
配列の最初に追加した方が見栄えは良いかも知れません。
[php start-line=”2″ decord=”true”]function add_action_links ( $links ) {
$add_link = ‘<a href=”options-general.php?page=pz-test”>Settings</a>’;
array_unshift( $links, $add_link);
return $links;
}[/php]
「Pz-HatenaBlogCard」は、クラスとして定義しているので、呼び出す関数名のところには「array($this, …)」が付いています。
[php decord=”true”]add_filter(‘plugin_action_links’,’add_action_links’);[/php]
↓
[php decord=”true”]add_filter(‘plugin_action_links’,array($this,’add_action_links’));[/php]
プラグイン名でフックするときも。
[php decord=”true”]add_filter(‘plugin_action_links_’.plugin_basename(__FILE__) , array($this,’add_action_links’));[/php]
[php decord=”true”]add_filter(‘plugin_action_links_’.plugin_basename(__FILE__) , ‘add_action_links’);[/php]
初めて「設定」にサブメニューを追加して設定画面を作ったところでいったん満足したつもりだったのですが、今度はプラグイン一覧のところにも「設定」が欲しいと思ってしまいました。
調べていたら「結構簡単に実装できそう！」と思ってやってみたところ、全てのプラグインに「設定」が付いてしまいました。（しかも全部「Pz-HatenaBlogCard」の設定画面）
「『設定』付いたー(^-^)o」→「さっそく公開！(^-^)o」
嬉しくなってさくさく公開してしまったところで、
「ぎゃ、ぎゃー！Σ(ﾟロﾟ)oﾞ」
「全部にPz-HBCの設定が付いてるー！Σ(ﾟロﾟ)oﾞ」
ちょっと倒れそうになってしまいました。
検証大事…。
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」。
ver1.1.0を公式プラグインディレクトリにて公開しました。
これにより、今回からダッシュボードからインストール・バージョンアップが行えるようになりました。
わからないことだらけでしたが、何とか公式プラグインディレクトリに公開することができました。
今後はWordPress管理画面のダッシュボードに更新が表示されて、バージョンアップできるかと思います。
新規インストールする場合も、プラグインのページから「pz」とか「hatena」というキーワードで検索できます。
不具合などありましたら、コメントなどでお知らせ願います(^-^;
可能な限り対応します。
公式プラグインディレクトリに載せるにあたって、バージョンを「1.1.0」にしました。
あとは、細かい点を修正しました。
get_optionのデフォルト値を設定しておけば、無い配列名のものはデフォルトから取ってくれると勘違いしていたので、修正しました。
[php start-line=”116″ decode=”true”]$this->options = get_option(‘Pz_HatenaBlogCard_options’,$this->defaults);[/php]
あくまでも、「Pz_HatenaBlogCard_options」が無い場合に、デフォルト値が設定されるので、「初めてのインストール」のときには、うまくデフォルト値が取られます。
バージョンアップ時には、「Pz_HatenaBlogCard_options」は存在するため、新しく設定項目を追加しても勝手には追加されません。（phpをもっと勉強せねば。）
そこで、アクティベーション時に、新しく加わった配列を追加するようにしました。
[php start-line=”116″] $this->options = get_option(‘Pz_HatenaBlogCard_options’, $this->defaults);
if ($this->options[‘plugin-version’] < $this->defaults[‘plugin-version’]) {
$this->options += $this->defaults;
$this->options[‘plugin-version’] = $this->defaults[‘plugin-version’];
}[/php]
前回のプラグインバージョンが古い場合、デフォルト値をマージします。
マージには、「＋」で繋げて、「配列1＋配列2」を使っています。この場合、配列1にあるものが優先されるようです。
「日本語化」というのとちょっと違いますが…。
初期設定値を「（このサイト内）」→「(This Site)」、「（このページ）」→「(This Page)」に変更しました。
その上で、日本語化ファイルで「(This Site)」→「（このサイト内）」、「(This Page)」→「（このページ）」へ置き換えています。
日本語環境で使っている場合、特に何も変わらないと思います。
readme.txtを修正。
基本的に英語のみだと思っていたのですが、日本語でも大丈夫っぽいので、日本語を多めにしました。
スクリーンショットを追加しました。
readme.txtを修正。日本語の説明を「description」に移したので、「その他の説明」のところに「For Japanese Users」の文字が残ってしまったので、「このプラグインは日本語ユーザー向け」に見えてしまうのでこの文を削除。（あながち間違えでも無いけど）
プラグイン画面で、「編集｜削除」となっている右に「設定」を追加。
「設定」ボタンの実装を誤ってしまい、全プラグインに Pz-HatenaBlogCard の設定ボタンが付いてしまうというミスをしました。
一時的に戻したものを 1.1.3 として公開した後、直したものを 1.1.4 として公開しました。
インストールしていただいている方々は、何度も更新がかかってしまいすいません。
手動でダウンロードしてもらう必要は無くなったため、「Pz-HatenaBlogCard」には最新版のZIPファイルは載せない予定です。
ただし、「最新版だとうまく動かない」などの不具合も考えて、各バージョンのページからダウンロードできるように用意しました。
[link url=”https://popozure.info/20150817/8233″]
[link url=”https://popozure.info/20150810/8065″]
[link url=”https://popozure.info/20150810/8045″]
[link url=”https://popozure.info/20150809/8025″]
これまで同様「Pz-HatenaBlogCard」のページを更新していきますので、そちらをご覧ください。
[link url=”https://popozure.info/pz-hatenablogcard”]
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公開しています。
WordPressテーマによっては、サムネイル画像やファビコンまわりがズレて表示されてしまうようです。
[2015/08/22追記]公式プラグインディレクトリにて公開しました。ダッシュボードからインストールやバージョンアップが行えます。
[link url=”https://popozure.info/pz-hatenablogcard”]
「STINGER3」や「賢威」といったWordPressで表示がズレていたようです。
この不具合は、ver1.0.2で対応しました。
[linkurl=”https://popozure.info/20150810/8065″]
対応はしたものの「新しく追加したパラメータ」なので、古いバージョンから使っていただいている方は、設定が「無効」になっています。
WordPress管理画面の「設定」→「Pz ブログカード」から設定画面を開き、「CSSリセット（img）」という項目にチェックを入れて、「変更を保存」を押してください。
既にチェックが入っていた場合にも、「変更を保存」を押すことで、CSSファイルが再作成されて、表示が直るはずです。
詳細は「ver1.0.2の記事」に書いたとおり、特定のテーマでは、スタイルシートで画像に対して「太目の枠」を付けたり、「下の余白」を付けたりします。
これは、サイト全体のデザインのためだったり、「画像であること」を分かり易くしているものですが、これがカードの中のファビコンなどにも適用されてしまったため、枠が付いたり余白ができたりしてしまいました。
なお、外部リンクに関しては「はてなブログカード」に置き換えているだけであり、はてなブログカードはiframeという仕組みを使っているからか、自サイトのスタイルシートに影響を受けないようです。
今回、内容的には「ver1.0.2の記事」と同じことを書いてしまいましたが、先の記事は、「プログラムの更新」をお知らせする書き方だったので、今ひとつ自分の不具合とむすびつきづらいかと思いました。
「サムネイルとファビコンに枠が付いてズレちゃう！」というアプローチで書いてみました。
このようなテーマを使っていて、「自分で画像を置いたら枠が出ちゃって困る！Σ(ﾟロﾟ)oﾞ」という場合には、強制的にstyleを指定してあげると良いかも知れません。
[html decode=”true”]<img src=”https://popozure.info/favicon.ico”>[/html]
↓
「img」タグに「style=”margin: 0; border: none;”」を追加して、余白と枠を無くす。
[html decode=”true”]<img style=”margin: 0; border: none;” src=”https://popozure.info/favicon.ico”>[/html]
↓
では(^-^)o
前回の続き。
作ったプラグイン、使ってくれる人がいそうなので調子に乗って「公式プラグインディレクトリ」に登録してみます。
軽いノリで作ったものの…。
いや…、完全に自分が使いたくて作ったものの…！Σ(ﾟロﾟ)oﾞ
けっこう、あちこちで使っていただいているようで、ありがたいことです。
さて、未だ「野良プラグイン」状態なので、自サイトで公開→ダウンロードしてもらう→自分で上書きアップロードか、無効化・削除・新規インストールしてもらう、という感じです。
「FTPとか余裕(^-^)o」という方なら「上書きして終わり(^-^)o」となると思うのですが、やはりそういうのに慣れていない方にとっては、「古いプラグインを無効化・削除・新しいプラグインを新規登録・有効化」という流れはけっこうシンドイと思うのです。
「軽いノリで作って」→「気軽に使ってもらう」ためには、「ラクに自サイトにアップ」だと、ちょっといけない気がしてきました(^-^;
いや、それだけじゃなくて、単純に「公式プラグインディレクトリへ登録する」ことに興味もあったのですが(^-^;
そんなわけで、登録してみたら「こんなんじゃダメだぜ！」ってメールが来て、軽くくじけそうな前回の記事がこちらです。
[link url=”https://popozure.info/20150819/8247″]
送ったタイミングが良かったのかどうだか、10分ちょっとくらいで承認メールが来ました。
| Your plugin hosting request has been approved. Within one hour, you will have access to your SVN repository at http://… |
| （Google翻訳） あなたのプラグインのホスティング要求が承認されました。 1時間以内に、あなたがであなたのSVNリポジトリにアクセスする必要があります。 |
うﾞぉい！Σ(ﾟロﾟ)oﾞ
「SVNとかいうのは小難しいから、あとで考えようΣ(ﾟロﾟ)oﾞ」とか思ってたけど、「1時間以内にアクセスする必要がある」ってどういうこっちゃー！Σ(ﾟロﾟ)oﾞ
「なんとかSVNとかっていうのインストールするんだっけ？Σ(ﾟロﾟ)oﾞ」
「リポジトリってどこだ？Σ(ﾟロﾟ)oﾞ」
「ってか、リポジトリってなんだあああああ！Σ(ﾟロﾟ)oﾞ」
…はっΣ(ﾟロﾟ)oﾞ
いや、違う、これ。
「1時間以内に、あなたのSVNリポジトリへアクセスできるようになります♪」だ、これ！Σ(ﾟロﾟ)oﾞ
無心に「TortoiseSVN」というのをインストールしてから気付きました。
すいません、取り乱しました…(^-^;
とりあえず、指摘されたところは修正を認めて貰えた、ということのようです。
機械で自動審査をしているから、とりあえず外部URLが書かれているものや、readme.txt に決まった見出しが無いと弾かれる仕組みだったのかも知れません。
この辺りも日本語化して欲しいです…。
もしくは、もっと英語力が欲しいです…。
今回は疲れたので、また今度。
↓続く
[link url=”https://popozure.info/20150822/8354″]
[amzn-link asin=”4761272317″][amzn-link asin=”4478069409″][amzn-link asin=”B01N33HG6H”][amzn-link asin=”B01DDA6OI0″][amzn-link asin=”B01MT8RFI5″]
とりあえず、「Pz-HatenaBlogCard」を公式プラグインディレクトリへ登録してみようと思います。
「WordPress.org」が提供しているプラグインのページです。
ここに登録すると、WordPress管理画面の「プラグイン」から「新規追加」を押して「プラグインの検索」をして、そこから「いますぐインストール」ボタンでインストールできるようになります。
プラグイン更新もサイトをわざわざ見に来ていただく必要もなくお知らせが出るので、良いことづくめな気がします。
しかし、登録に関する部分はすべて英語！Σ(ﾟロﾟ)oﾞ
「WordPressプラグイン」を登録するとなったら、ドキュメント類も英語で書いて提出して、検査してもらわないといけないのです。
だがしかし、登録に関する部分はすべて英語！Σ(ﾟロﾟ)oﾞ
趣味グラマーにはけっこう敷居が高いですね(^-^;
というわけで、「WordPress.org」から登録を行います。
自分の場合は Akismet とか Jetpack 連携とかで既にアカウント登録をしていましたのでログインするだけです。
アカウントが無い場合は、まずアカウント登録からです。
下記リンクから、必須項目（ユーザー名、メールアドレス）を入力していきます。
[link url=”https://ja.forums.wordpress.org/register.php”]
英語のメールでユーザー名（自分で入力したもの）とパスワードが送られてくると思います。
（英語メールなので「迷惑メール」とかに分類されたりするかもしれないので注意しましょう。）
とにかく初めてのことなので、検索してやり方を調べます。
「株式会社ワイワイエンジン」さんのページが比較的新しい記事ということもあって、ひととおりまとまっていました。ありがたや。
[link url=”http://yyengine.jp/blog/yyengine/wp-plugin-add/”]
手順とかは先人様たちのサイトで何とかなるものの、英語でドキュメント作ってメールのやり取りするだとか、そのあとのバージョン管理もちょっと面倒そうな予感がします…(^-^;
さて、「Plugin」→「Developers」とたどっていき、開発者向けページを開きます。
[link url=”https://wordpress.org/plugins/”]
左のメニューの「Add Your Plugin」（あなたのプラグインを追加）を選びます。
登録フォームが出てくるので、それぞれ入力していきます。
3項目とも「required（必須）」となっています。
「Plugin Name」にプラグインの名前を入力します。（大文字で入力しても小文字になるかも？）
「Plugin Description」に説明文を入力します。
そして、「Plugin URL」には、プラグインのファイルをZIPファイルとしてアップロードしておいて、そのURLを入力します。
ファイルを選んでアップロードするわけでは無いので、自分のサイトのどこかにFTPなどでアップロードしておく必要があります。
全部入力して、「Send Post ≫」を押したら、登録完了です。
結果を待ちます。
プラグイン名は大文字と小文字を使っていたのですが、一覧を見たところ全部小文字に直されていました。
夜に登録したら、次の日の昼頃に返信が来ていました。
分かっていましたが、全部英語です(^-^;
メールタイトルにも「Request:」と付いているので、何か足りなかったようです。
とりあえず、ニュアンスだけじゃ難しいので、Google先生に翻訳を手伝ってもらいました。
機械翻訳だけでは限界なので、けっこう意訳が入っています。
間違っているかも知れないので注意を(^-^;
（もしくはコメントなどで指摘をいただけるとありがたいです！！）
| There are issues with your plugin code. Please read this ENTIRE email, address all listed issues, and reply to this email with your corrected code attached. It is required for you to read and reply to these emails, and failure to do so will result in your plugin being rejected. |
| （Google先生に手伝ってもらった翻訳。でも間違いもあるかも(^-^;） あなたのプラグインには問題があります。このメールを全部ちゃんと読んで、列記された問題に対処して、修正したコードを添付してこのメールに返信してください。 そうしない結果、あなたのプラグインは（登録を）拒否されることになります。 |
んー、とりあえず、「公式ディレクトリに登録するにしては、ダメなところがあるから、直したらZIPファイルを添付して送り直して！」ということらしいです。
指摘されたのは、主に画像生成のために、外部のURLを呼んでいるところでした。
まず、ひとつ目の指摘です。
| ## Calling images remotely Offloading images to your own server is disallowed. Please include all images needed for your plugin locally. |
| （Google先生に手伝ってもらった翻訳。でも間違いもあるかも(^-^;） ## リモートからの画像呼び出し あなたの独自サーバーに画像処理を分担させることは許可されません。 全ての画像はプラグインに同梱させてローカルから呼び出してください。 |
ファビコンを取得するために「Hatena::Favicon」のURLを組み込んでいた部分が指摘されました。
phpのソースにはサムネイル画像取得APIとして「WordPress.org」のURLが書いてあったのですが、そちらも同じ指摘をされました。
「Pz-HatenaBlogCard」ではサムネイル画像取得APIは使用していないのでそちらは削除しました。
ファビコン取得は空欄にしておくか、標準アイコンを作っておいて、使う人の自由でWebAPIのURLを記入して貰うのが良いのかも知れません。
ただ、「http://s.wordpress.com/mshots/v1/」については、「Browser-Shots」という有名プラグインでも使われているので通りそうな気もするのですが(^-^;
とりあえず、難しいのでいったん保留。
ふたつ目の指摘は「はてなブックマーク数」を取得するための「http://b.hatena.ne.jp/entry/image/」を呼んでいる部分です。
↓こういうの
こちらも外部URL（WebAPI）を呼んでいるところですね(^-^;
何かかしらの情報（このプラグインの場合「リンク先URL」）が、外部サイト（このプラグインの場合「hatena.ne.jp」）に送られているわけなのですが、「何かかしらの情報」と「送る外部先」によっては、ユーザーに害を与えるかも知れません。
外部URLへのアクセスへは厳しめなのかも知れません。
| ## Incomplete Readme You’re calling hatena.ne.jp remotely to generate images. |
| （Google先生に手伝ってもらった翻訳。でも間違いもあるかも(^-^;） ## 不完全なReadme あなたは画像を生成するために hatena.ne.jp を呼んでいます。 |
「画像を生成するために hatena.ne.jp を呼んでいます」と書かれていますが、題名は「Readmeファイルの不備（Incomplete Readme）」です。
あれ、そういえば、こっちは「オフロード禁止」じゃないんだ？Σ(ﾟロﾟ)oﾞ
そして、続き。
| THIS IS OKAY! But you forgot to put that information in the readme. |
| （Google先生に手伝ってもらった翻訳。でも間違いもあるかも(^-^;） これは大丈夫です！しかし、あなたはReadmeファイルにその案内を入れるのを忘れていました。 |
大文字で「THIS IS OKAY!」とか書かれているので、「でも、これはオッケーなんだぜ！ でもな？Readmeにそれを書いておくのを忘れてるぜ？」ってフレンドリーな感じに見えてきます。
さて、これはどうやら「画像を生成するために hatena.ne.jp へアクセスしています」ということを Readme.txt に明記しておく必要があったようです。
| Plugins that send data to other servers, call js from other servers, and/or require passwords and APIs to function are required to have a full and complete Readme so we can make sure you’re providing the users with all the information they need before they install your plugin. Our goal with this is to make sure everyone knows what they’re installing and what they need to do before they install it. No surprises. |
| （Google先生に手伝ってもらった翻訳。でも間違いもあるかも(^-^;） 他サーバーにデータを送信するプラグイン、他サーバーにあるJavaScriptを呼び出すプラグイン、それらを（もしくは単独で）機能するためにパスワードやAPIを使用する場合、それらの情報（他サーバーへ情報・パスワードを送信していること）をあなたのプラグインをインストールする前にちゃんと説明する必要があります。（この辺、かなり意訳(^-^;） |
「外部のサーバーなどに情報を送るときは、詳しく無い人にも分かる説明を書く必要があるのに、それを明記しない、不意打ち、ダメ！」みたいな事が書いてある気がしました。（多分）
とりあえず、画像取得APIそのものは使っても良くて、「説明できていない」という指摘だったので、readme.txtに「私は『はてブ数』取得に hatena.ne.jp へアクセスします」みたいな一文を追加してみます。
でも、「はてブ数」画像取得API（http://b.hatena.ne.jp）は「これはオッケー！」なのに、「ファビコン」画像取得API（http://favicon.hatena.ne.jp）は「独自サーバーでのオフロード禁止！」になっているのが不思議です。
どっちも同じ hatena.ne.jp なのですが。
もうひとつ指摘がありました。
| Your read me MUST validate per http://wordpress.org/plugins/about/validator/ or we will reject it. |
| （Google先生に手伝ってもらった翻訳。でも間違いもあるかも(^-^;） あなたのつくった Readme は「http://wordpress.org/plugins/about/validator/」で検証しないといけません。そうでなければ却下です。 |
ということで、readme.txt は却下寸前です(^-^;
必須項目とかは書いたつもりだったのですが、ダメだったようです。
| Please create your read me one based on this: http://wordpress.org/plugins/about/readme.txt Alternately, you can use this tool to generate one: http://tools.trepmal.com/wp-readme-generator/ |
| （Google先生に手伝ってもらった翻訳。でも間違いもあるかも(^-^;） どうぞ「readme.txt について」に基づいて作ってください。 またはreadmeジェネレータから生成することもできます。 |
リンク先のreadme.txtは、該当項目を書き直して使えるひな形になっています。
もしくは「readmeジェネレータ」をつかうわけですが…ジェネレータを使いました。
「ファビコン」は何か無難な四角とか丸とか矢印っぽいアイコンにしてしまおうかとも思ったのですが、やはり、「はてブ数」を取得するAPIも、「ファビコン」を取得するAPIもそのまま使うこととします。
そして、Readme には、
というのを追記しました。（英文としては、かなり怪しいΣ(ﾟロﾟ)oﾞ）
そして、返信するメールには、
こんな感じのことを英語で…多分、書けてるんじゃないかなぁ…(^-^;
伝わってるといいなぁ…(^-^;
伝われ…この気持ち…！Σ(ﾟロﾟ)oﾞ
そして、修正したプログラムとReadme.txtを含めて、ZIPファイルをつくりなおし。
今回はアップロードしてURLを提供するのでは無く、メールに直接ZIPファイルを添付します。
「送信」っと…。
結果がこわいです。
す、すでに、くじけそうかも…Σ(ﾟロﾟ;oﾞ
↓続く
[link url=”https://popozure.info/20150819/8270″]
