なぜ人々はWordpressを愛していますか？彼と仕事をするのは簡単だからです。 JoomlaやDrupalのような大規模なCMSには柔軟性がないため、混乱することはありません。また、彼は非常に人気があります-つまり、あらゆる場面でプラグインを見つけることができます。

十分な理由により、 Lurkmore.ruによる非難にもかかわらず、 Herb Sutter 、 Mark Shuttleworth 、および他の多くの人がWordpressを使用しています。たとえば、私。

私の投稿では、他の人のブログを頻繁に参照しています。そして、アイデアが思いついた-ニックネームの隣に、私が紹介する人、彼のサービスのアイコンも見せてみませんか？たとえば、Twitterからの鳥やブログスポットからの手紙Bでしょうか？ウィキペディアなどにも同様の機能があり、多くのブログホストがこれを許可しています（Dreamwidthなど）。

そのため、Wordpress RikkiのWP Social Iconsのプラグインが誕生しました。マウスを1回クリックするだけで、ソーシャルネットワークからGitHubまで、あらゆるサービスのアカウントにリンクを追加できます。

なんで？

Wordpress用のプラグインの作成方法に関する記事は多数ありますが、作業中に遭遇したバグについての記事はありませんでした。したがって、私は私の印象を書き留めています-突然誰かが同じものに出くわしますが、彼は決定する方法を知りません。そして、トレーニング例では通常省略されているすべての改善点を示します。

作業中、私は他の人のプラグインのソースコードとJenyayの開発の多くを使用しました（彼の一連の記事へのリンクは付録にあります）。しかし、「職人的」な実装では不十分でした。プラグインは、各エンドユーザーが自分で変更できるため便利です。したがって、新しいサービスのサポートを追加するには、5分と1回の再インストールだけで済みます。

特に仕事は、私がこのプラグインを自分で使用するのに役立ちました（つまり、アメリカの同僚が言うように、 ドッグフードを食べる ）。そして、どこで何を改善できるかを教えてくれたのは、最初のスケッチに対する苦痛でした。

プログラム可能

設計中

そもそも、Wordpress用のプラグインの作成は簡単ではありませんが、 非常に簡単です。何かから継承されたクラスを作成したり、フォーマットを賢くしたり、いくつかのトリッキーな仕様に従う必要はありません。「イベント」は、「大」アプリケーションのイベントとほぼ同様に機能する特別なオブジェクトに配置されます。

最初に、必要なものについて慎重に考える必要があります。また、個々の単語をマークする方法が必要です。これは、編集時に表示され、投稿、ページ、RSSのリンクに自動的に変換されます。

ショートコードは非常によく似ています-角括弧で囲まれ、プラグインによる処理用に特別に調整された特別なタグです。彼らは2008年にリリースされた別のバージョン2.5が登場したので、互換性に関する特別な問題は私たちを脅かしていません。

ユーザーからどの形式を受け入れる必要がありますか？なぜなら最終的なHTMLコードはアイコンとURLのみが異なります。それを処理するショートコードと関数が1つあるのは論理的です。パラメータを介して追加情報を送信することもでき、これは非常に便利です。さらに、作成するショートコードが少ないほど、他のプラグインと競合する可能性が低くなります。

私のショートコードは次のようになりました。

[ユーザーID]

そのパラメーターは次のとおりです。

「id」はオプションのパラメーターです。 id。ヒーローはサービスに登録されます。たとえば。トーバルズ家族。

「タイプ」-サービス

「url」はオプションのパラメーターです。参照するURL（たとえば、プロファイルまたは別のブログ投稿）。

そして、次のように使用します。

[userid type="blogspot" id="torvalds-family"]Linus Torvalds[/userid]

または：

[userid type="blogspot" url="http://blogspot.com"]blogspot[/userid]

カーネルを書く

プラグインの構造を作成し（ GitHubを参照）、rikkis-wp-social-icons.phpでミニチュアカーネルの概要を説明します。

 class socialusers { var $options = array( "blogspot" => "http://%s.blogspot.com/", "ljuser" => "http://%s.livejournal.com/", "ljcomm" => "http://livejournal.com/community/%s", "liruboy" => "http://www.liveinternet.ru/users/%s/", "lirugirl" => "http://www.liveinternet.ru/users/%s/", "vk" => "http://vk.com/%s", "twitter" => "http://twitter.com/#!/%s/", "facebook" => "http://www.facebook.com/%s", "google_plus" => "https://plus.google.com/%s", "wordpress" => "http://%s.wordpress.com/", "habrahabr" => "http://%s.habrahabr.ru/", "github" => "http://github.com/users/%s/" ); function socialusers(){ if (!function_exists ('add_shortcode') ) return; add_shortcode('userid', array (&$this, 'icon_func') ); } function icon_func($atts, $content="") { if (!$content) return ""; extract( shortcode_atts ( array('id' => null, 'type' => null, 'url' => null), $atts ) ); if (!$type || !array_key_exists($type, $this->options) ) return $content; if (!$id) $id = $content; $userinfo_url = esc_url(($url) ? $url : sprintf($this->options[$type], trim($id))); $userpic_url = esc_url(plugins_url( "js/img/$type.gif" , __FILE__ )); return "<span style='white-space: nowrap; display: inline !important;'><a href='$userinfo_url' ref='nofollow'><img src='$userpic_url' alt='[info]' width='17' height='17' style='vertical-align: bottom; border: 0; padding-right: 1px;vertical-align:middle; margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0;' /></a><a href='$userinfo_url' ref='nofollow'><b>$content</b></a></span>"; } } $socialusers = new socialusers();

変数名の競合を回避するために、すべての呼び出しをソーシャルユーザーの1つのクラスに入れます。 options変数は、参照するサービスのidとURLを格納し、ユーザー名を％sに置き換えます。 js / imgフォルダーに、対応するアイコンとともにgifを配置します。

コンストラクターで、Wordpressがショートコードをサポートしているかどうかを確認し、サポートしていない場合は何もしません。ユーザーが古いバージョンを使用しているという理由だけで、Wordpress全体をユーザーに公開するのは良くありません。

すべてが正常な場合、ハンドラーと同じクラスインスタンスからicon_func関数を指定して、新しいショートコードを追加します。

icon_func-非常に短く、非常に興味深い。 2つのパラメーターが含まれます。

$ atts-属性の配列

$ content-タグ間のテキスト

ショートコードの代わりに、ユーザーにはこの関数が返すものが表示されます。ブロックの最終コードが形成されるのはここ（最後の戻り値）です。

コメントからのアドバイスによると、「入力」になったすべての行は、セキュリティホールがないようにesc_urlを介してチェックされます。

次の2行に注意してください。

 extract( shortcode_atts ( array('id' => null, 'type' => null, 'url' => null), $atts ) ); </<source>     $atts       <source lang="php"> plugins_url( "js/img/$type.gif" , __FILE__ );

現在のディレクトリを基準にして、タイプ別にアイコンのURLを取得します。これが__FILE__属性の目的です。そうでない場合（およびいくつかのプラグインと例の作成者が明らかに聞いていない場合）、プラグインディレクトリの名前を挿入する必要がありますが、それでも機能しない可能性があります。

$ idに対してtrim（）を実行することも同様に重要です。実際のところ、Wordpressのエディターで単語をダブルクリックすると、その単語の後にスペースが付いて強調表示されます 。その結果、完全に不適切なスペースを持つアカウント名が取得され、リンクは機能しません。

原則として、すでにこの形式（17行のコード+ 14行の設定）で、プラグインをインストールして使用できます。本物のハッカーがウィンドウインターフェースを軽spiしています:)。通常のプラグインをインストールするので、phpと画像をzipでパックし、wordpressにインストールしてみてください。

そのような実験にはローカルのApache + PHP + mySQLを、そしてそれらに加えてWordpressを置くことを強くお勧めします。デバッグはもっと楽しくなります-たとえば、インストールと再インストールの代わりに、対応するディレクトリのファイルを単純に置き換えることができます。

ボタンを追加

Wordpressは、別のtinyMCEコンポーネントで投稿とページを編集します。メインのPHPから取得するには、元のフォームをわずかに拡張する必要があります。

 class socialusers { var $options = array( "blogspot" => "http://%s.blogspot.com/", "ljuser" => "http://%s.livejournal.com/", "ljcomm" => "http://livejournal.com/community/%s", "liruboy" => "http://www.liveinternet.ru/users/%s/", "lirugirl" => "http://www.liveinternet.ru/users/%s/", "vk" => "http://vk.com/%s", "twitter" => "http://twitter.com/#!/%s/", "facebook" => "http://www.facebook.com/%s", "google_plus" => "https://plus.google.com/%s", "wordpress" => "http://%s.wordpress.com/", "habrahabr" => "http://%s.habrahabr.ru/", "github" => "http://github.com/users/%s/" ); function socialusers(){ if (!function_exists ('add_shortcode') ) return; add_shortcode('userid', array (&$this, 'icon_func') ); add_filter( 'mce_buttons_3', array(&$this, 'mce_buttons') ); add_filter( 'mce_external_plugins', array(&$this, 'mce_external_plugins') ); } function icon_func($atts, $content="") { if (!$content) return ""; extract( shortcode_atts ( array('id' => null, 'type' => null, 'url' => null), $atts ) ); if (!$type || !array_key_exists($type, $this->options) ) return $content; if (!$id) $id = $content; $userinfo_url = esc_url(($url) ? $url : sprintf($this->options[$type], trim($id))); $userpic_url = esc_url(plugins_url( "js/img/$type.gif" , __FILE__ )); return "<span style='white-space: nowrap; display: inline !important;'><a href='$userinfo_url' ref='nofollow'><img src='$userpic_url' alt='[info]' width='17' height='17' style='vertical-align: bottom; border: 0; padding-right: 1px;vertical-align:middle; margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0;' /></a><a href='$userinfo_url' ref='nofollow'><b>$content</b></a></span>"; } function mce_external_plugins($plugin_array) { $plugin_array['rikkisocialicons'] = plugins_url ('js/rikkis-wp-social-icons-editor_plugin.js', __FILE__ ); return $plugin_array; } function mce_buttons($buttons) { return array_merge($buttons, array_keys($this->options)); } } $socialusers = new socialusers();

ここではすべてが簡単です-mce_external_pluginsはJavaScriptをロードし、ボタンが生成されます。mce_buttonsはそこにオプション辞書からすべてのキーを配置します。

次に、ボタン用のJavaScriptを作成する必要があります。残念ながら、tinyMCEはWordpressに非常にしっかりと組み込まれているため、PHPからWordpressプラグインのJavaScriptにパラメーターを渡す標準的な方法はここでは機能しません。もちろん、JSonを使用してそれらを取得し、実際に1か所でのみ修正を行う必要があることを確認できます。しかし、これは些細な利便性が重大な問題を引き起こす可能性がある場合と同じです。

tinyMCEプラグインのフレーミングはかなり標準的です：

 (function() { tinymce.create('tinymce.plugins.RikkiSocialIconsPlugin', { init : function(ed, url) { //   } }, getInfo : function() { return { //   ,     }; } }); tinymce.PluginManager.add('rikkisocialicons', tinymce.plugins.RikkiSocialIconsPlugin); })();

選択したテキストフラグメントをショートコードのショートコードでフレーム化するボタンを1つ追加すると、次のようになります。

 ed.addCommand('mce-blogspot', function() { var newcontent = '[userid type="blogspot"]' + tinyMCE.activeEditor.selection.getContent({format : 'raw'}) + '[/userid]'; tinyMCE.activeEditor.selection.setContent(newcontent); }); ed.addButton('blogspot', { title : 'blogspot', md : 'mce-blogspot', image : url + '/img/blogspot.gif' });

もちろん、プラグインがそれ自体を構成するという事実にすでに慣れているユーザーは、ループ内でボタンを生成しようとします。

 (function() { tinymce.create('tinymce.plugins.RikkiSocialIconsPlugin', { var newButtons = ["ljuser", "ljcomm", "liruman", "lirugirl", "ljr", "vk", "twitter"]; tinymce.create('tinymce.plugins.LjusersPlugin', { init : function(ed, url) { var newButtonsLength = newButtons.length, i = 0; while(i < newButtonsLength){ var itemTitle = newButtons[i]; var itemCommand = 'mce'+itemTitle; ed.addCommand(itemCommand, function() { var newcontent = '[userid type="'+itemTitle+'"]' + tinyMCE.activeEditor.selection.getContent({format : 'raw'}) + '[/userid]'; tinyMCE.activeEditor.selection.setContent(newcontent); }); ed.addButton(itemTitle, { title : itemTitle, cmd : itemCommand, image : url + '/img/'+itemTitle+'.gif' }); i++; } }, getInfo : function() { return { longname : 'Rikki\'s WP Social Icons', author : 'Rikki Mongoose', authorurl : 'http://rikkimongoose.ru', infourl : 'http://rikkimongoose.ru/projects/rikkis-wp-social-icons/', version : "1.0" }; } }); tinymce.PluginManager.add('rikkisocialicons', tinymce.plugins.RikkiSocialIconsPlugin); })();

そして、そうです-ロボットはプログラマーのために働くべきではありませんか？

この方法でボタンを生成してからエディターに切り替えると、すぐにスキルに誇りを感じるでしょう。配列に示されているボタンは並んでおり、各ボタンにはサイト訪問者またはRSSフィードリーダーに表示されるものと同じアイコンがあります。とても快適です！

このコードは素晴らしく見えますが、1つの欠点があります-機能しません 。これは、tinyMCEであなたを待っている最初のバグです。一見、ボタンは最も普通のように見えます-しかし、クリックすると、 それぞれが最後の要素を持つショートコードを挿入することがわかります -私たちの場合、twitter。

コメントで提案されているように、クロージャーを介してすべて~~を手で~~書く必要があります。このようなもの：

 (function() { var newButtons = ["ljuser", "google_plus", "wordpress", "habrahabr", "github"]; tinymce.create('tinymce.plugins.RikkiSocialIconsPlugin', { init : function(ed, url) { for ( i in newButtons) { var itemTitle = newButtons[i]; (function(itemTitle) { var itemCommand = 'mce'+itemTitle; ed.addCommand(itemCommand, function() { var newcontent = '[userid type="'+itemTitle+'"]' + tinyMCE.activeEditor.selection.getContent({format : 'raw'}) + '[/userid]'; tinyMCE.activeEditor.selection.setContent(newcontent); }); ed.addButton(itemTitle, { title : itemTitle, cmd : itemCommand, image : url + '/img/'+itemTitle+'.gif' }); })(itemTitle); } }, getInfo : function() { return { longname : 'Rikki\'s WP Social Icons', author : 'Rikki Mongoose', authorurl : 'http://rikkimongoose.ru', infourl : 'http://rikkimongoose.ru/projects/rikkis-wp-social-icons/', version : "1.0" }; } }); tinymce.PluginManager.add('rikkisocialicons', tinymce.plugins.RikkiSocialIconsPlugin); })();

テストにより、このオプションが適切に機能することが示されました。コメンテーターに栄光を！

このオプションはすでにはるかに優れています-各ボタンはその場所を知っており、必要な動作をします。

最後に、あなたに完全に依存する2番目のバグがあります。また、Wordpress、tinyMCE、およびInternet Explorerでさえ、非常に便利ではないエラー処理を除いて非難されますが、大量の血液を台無しにする可能性があります。

考えられるエラーは、tinymce.PluginManager.add（param1、param2）関数に関係しています。 慎重に書いてください。

param1は、phpファイルの新しいボタンのid配列を追加したキーと一致する必要があります。私の場合、 ' rikkisocialicons 'が必要です（PHPには$ plugin_array [' rikkisocialicons ']があるため）。

param2は、tinymce.create（）で作成されたものと一致する必要があります。私の場合、これはtinymce.plugins.RikkiSocialIconsPluginです（スクリプトではtinymce.create（ ' tinymce.plugins.RikkiSocialIconsPlugin '）と記述しているため）

これのいずれかが一致しない場合、エディターはボタン付きのパネルを失い、コンソールは発生した ' k is undefined 'エラーを報告します...もちろん、圧縮されたjQuery.min.jsで、デバッグもコールを見ては、わずかな機会ではありません。

サービスXのアイコンを追加する方法は？

まず、 GitHubにアクセスして、正しいアイコンのフォークが既に表示されているかどうかを確認しますか？そうでない場合は、自分で実行してください。

残りのアイコンがある同じディレクトリにgif形式で保存します
キーをgifの名前と一致させ、URLを置換するURLと一致させ、ユーザー名を％sに置き換えます（この機会に、この時点ですべてのC ++プログラマーに挨拶を送ります）。きっと懐かしさを感じるでしょう）。
ボタンをJavaScriptに移動する場合は、同じIDを持つ要素をnewButtons配列に追加します
すべてをZIPで梱包
プラグインの古いバージョンを切断して削除します。投稿のショートコードは影響を受けませんのでご安心ください。
更新されたバージョンをダウンロードし、アクティベートしてお楽しみください

ボタンの順序は、PHPファイルの順序によって異なります。

以上です！

プラグインはWordpressディレクトリにあります。そこで、またはGitHubで、あなたのスタンドアロンブログがトレンディなアイコンで装飾されたと言って、著者を喜ばせることができます。また、ドリーム幅アイコンまたはその他のxangaでプロジェクトを補完できます。

カタログに追加する

残った最後のステップは、標準の検索を使用して見つけることができるように、Wordpressディレクトリにプラグインを追加することです。

もちろん、事前にプラグインヘッダーにreadme.txtと標準コメントを追加することを忘れないでください。そうしないと、ユーザーは自分が設定しているものを見つけることができません。

手順全体については、英語版の大きなマニュアルに詳しく説明されています。

そして、待つことができない人のために-ここに短いステップバイステップガイドがあります：

wordpress.orgにアクセスして、そこにアカウントを作成します
パスワードを取得します。その下に進み、プラグインの追加ページに移動します。 ZIPへのリンクをドロップし、名前と説明を書き、Postを送信します。
今、あなたは待たなければなりません。マニュアルからのプラグインは18時間考慮されましたが、私のプラグインは4時間かかりました。レビューが終了し、すべてがうまくいくと、サーバーに空の SVNディレクトリが表示されます。
ローカルでフォルダーを作成し、そこでチェックアウトを行い、プラグインを切り捨ててコピーします。 ZIPを圧縮する必要はありません 。truncでコミットした後、サーバー上のスクリプトはすべてを自動的に圧縮します。
コミットします。
http://wordpress.org/extend/plugins/rikkis-wp-social-icons/ページにアクセスします。 rikkis-wp-social-iconsの代わりに、プラグインの名前を置き換えます。
http://wordpress.org/extend/plugins/ページにアクセスし、最新のプラグインのリストを注意深く見てください。ここに彼は、私たちのハンサムな男です！

何かが機能しなかった場合は、大きなマニュアルを参照してください。そこにはすべてが非常に詳しく書かれています。

こちらもご覧ください

作者は、プロジェクトのgithubバージョンをご愛顧いただき、さらに発展させてくれるすべての人に感謝します。

1ページのWordpressプラグイン