nigauri.me - ソーシャルブックマークを追加する

ソーシャルブックマークを追加する - ぼくにがうりくん。

Nigauri.me Spined HTML

ソーシャルブックマークを追加する - ぼくにがうりくん。 chromeだと「保護されていません」って出ちゃうんだよ。 ホーム 日記 技術情報 Java Play framework Apache Wicket セットアップ～画面表示 ModelとPropertyModel フォームの入力項目 バリデーションとエラーメッセージ ページの継承 データ出力時の書式指定 国際化 ModalWindow EclipseLink セットアップ 検索処理 更新処理とロック処理 Connectionの取得 Android 開発環境のインストール 作成したアプリの公開 高速エミュレータ Genymotion 無料版と有料版でソースを共有する JavaでSSH JavaでSubversion Apache+Tomcat WordPress プラグイン Page List Widget プラグイン Insert Estimated Reading Time 自作プラグインをWordPressの公式ディレクトリに登録する WordPress カスタマイズメモ WordPress 3.7 で検索結果の表示順を日付の降順にする ショートコードの作り方 ソーシャルブックマークを追加する タグクラウドのカスタマイズ 特定のプラグインの更新通知を非表示にする 画像サイズの追加 アップロードできる拡張子を追加する functions.php を分割する 仮想 robots.txt に記述を追加する メタ情報ウィジェットからいらない項目を削除する 管理バーのうちいらない項目を削除する 管理画面用のCSSの追加 Jetpackの関連投稿のカスタマイズ ページ分割時に全ページ分の目次を出力する（要TOC+） テーマ Basic カスタマイズメモ ビルダー＆ショートコードメモ Hook Content 日付・時刻のフォーマットの変更 ページネーション lightbox 固定ページの投稿日を表示 メインナビゲーションの修正 アイキャッチ画像 パンくずリストの置き場所 コメント欄の投稿日時と時刻の間の「@」を消す 日本語化ファイル置き場 今回行ったセキュリティ対策について 使用しているプラグイン WordPress インストールメモ Linux ヘボいネットブックにxubuntuをインストールする ヘボいネットブックにLinux Mintをインストールする ヘボいネットブックにLubuntuをインストールする LinuxにXAMPPをインストールする Linuxでブロードバンドルータ構築メモ Plone インストール（Windows版） 雑多なTips群 Apache+Plone SimpleBlogの導入 3年くらいPloneを使って感じたことまとめ その他 Surface Pro 3 Surface Pro 3 メモ Surface Pro 3 を一週間使って感じたことまとめ Outlook 2013 で困ったところのメモ Microsoft Edgeの検索エンジンをGoogleに変更する Git WindowsからGitLabを使う 無視ファイル(.gitignore) SourceTree Git + Eclipse (+ codebreak) SharePoint C# からの操作 PowerShellからの操作 JavaScript からの操作 自作PowerShellスクリプトを実行する CAML 簡易メモ Windows上で複数のXAMPPを共存させる Tritonn インストールメモ Markdown メモ Trac メモ Windows バッチファイル メモ 仮想ハードディスクでかんたんデュアルブート Google Chrome とりあえず始めるGoogle Chrome Extensions Chromeでフォントの設定を変えても効かない時の対応 Vivaldiブラウザー導入メモ Thunderbird メモ Memcached Subversion関連 テキストエディタ Atom 導入メモ 自宅サーバで独自ドメイン stone for Android 設定メモ ゲーム 闘姫伝承 ANGEL EYES 闘姫伝承基礎知識 今日から始める闘姫伝承 闘姫伝承最新事情 闘姫伝承豆知識 キャラ別攻略・ミステリアスパワー キャラ別攻略・マリー＆キング キャラ別攻略・キリコ キャラ別攻略・レイカ キャラ別攻略・ライヤ キャラ別攻略・ハイウェイスター キャラ別攻略・リナ キャラ別攻略・ちび子 vs. 大天使様 闘姫伝承用語集 記事中の表記について デジタル・デビル物語 女神転生Ⅱ マップ 悪魔データ GOOD悪魔一覧 NEUTRAL悪魔一覧 EVIL悪魔一覧 唯一神データ 悪魔相性表 悪魔合体表 悪魔合体逆引きシミュレータ アイテム表 魔法一覧 簡易攻略ガイド パワープレイ カジノ 裏技、小ネタ ダークハーフメモ その他のゲーム 時空の旅人 情報ページ 正当な歴史 力の支配する歴史 お金が支配する歴史 愛の支配する歴史 食べ物の支配する歴史 大迷路 情報ページ 大迷路 LEVEL1 大迷路 LEVEL2 大迷路 LEVEL3 大迷路 LEVEL4 魔法のプリンセス ミンキーモモ リメンバードリーム 情報ページ もっともあぶない刑事 のあぶない情報ページ もっともあぶない攻略 もっともあぶない会話集 特救指令ソルブレイン 情報ページ ジャイラス 情報ページ EGYPT 情報ページ ひとこと小ネタ集 物置 自作LINEスタンプ・着せかえ Androidアプリ れびう君 Androidアプリ 打出の小槌 WordPress 日本語化 ファイルいろいろ TrueTypeフォント DDS2 TrueTypeフォント woodcut 首もげた リンク ごちゃ LINEスタンプを作った LINE着せかえも作った スズキ・ハスラー メモ GPSログ・ルート 相互変換メモ Runtastic ←→ Garmin Connect 相互変換メモ Runtastic → Runkeeper 移行メモ 角栓くん ホーム > 技術情報 > WordPress > WordPress カスタマイズメモ > ソーシャルブックマークを追加する 2013/11/29 ソーシャルブックマークを追加する プラグインを使わず、テンプレートもいじらずに、JavaScript の追加と functions.php の修正で表示する。 今回は各記事の下にソーシャルブックマークを表示することにする。 もくじ1 対象のサービスからコードをコピー2 JavaScript の作成3 JavaScript の登録4 HTML 部の作成5 作成した HTML を記事の末尾に追加6 CSS の修正7 参考 対象のサービスからコードをコピー Twitter https://twitter.com/about/resources/buttons Facebook https://developers.facebook.com/docs/reference/plugins/like/ はてなブックマーク http://b.hatena.ne.jp/guide/bbutton Google+ https://developers.google.com/+/web/+1button/?hl=ja Pocket http://getpocket.com/publisher/button その他 あらかじめ各サービスのボタンの作り方ページに行き、好きなボタン等を作成し、生成されたコードをコピーしておく。 JavaScript の作成 まずは JavaScript ファイルを作成。今回はテーマディレクトリの下に「custom」ディレクトリを作成し、その中に「social_buttons.js」を配置する。 作成したファイルに、あらかじめ生成してコピーを取っておいた各サービスのコードのうち JavaScript 部分だけを抜き出しコピペする。 <script> で囲われた部分を抜き出せば大体は OK。 JavaScript の登録 functions.php（Themify のテーマを使う場合は custom-functions.php）にコードを記述し、JavaScriptを登録する。 functions.php PHP if (!is_admin()) { function custom_add_scripts() { wp_register_script('myscript', get_bloginfo('template_url') . '/custom/social_buttons.js', false, '1.0', true); wp_enqueue_script('myscript'); } add_action('wp_print_scripts', 'custom_add_scripts'); } 1234567 if (!is_admin()) {    function custom_add_scripts() {        wp_register_script('myscript', get_bloginfo('template_url') . '/custom/social_buttons.js', false, '1.0', true);        wp_enqueue_script('myscript');    }    add_action('wp_print_scripts', 'custom_add_scripts');} myscript となっている部分は好きに変えてもいい（他とバッティングするものはダメ）。変える場合は wp_register_script と wp_enqueue_script の両方を修正すること。 管理画面では必要ないので is_admin() 以外の場合のみ追加。JavaScript の中身を変えたらバージョン番号も変えると良い。 HTML 部の作成 あらかじめ生成してコピーを取っておいた各サービスのコードのうち HTML 部分だけを抜き出す。で、好きなように HTML を組んで返却するような関数を作成する。 reverberate ではなく return で返すようにしているので注意。 URLはどうしても必要なので get_permalink で取得。はてなブックマークで必要なタイトルも get_the_title で取得。 functions.php PHP function get_social_button_html($post_id) { $link = get_permalink($post_id); $title = get_the_title($post_id); $twitter = "<a href='https://twitter.com/share' class='twitter-share-button' data-via='nigauri' data-lang='ja'>ツイート</a>"; $facebook = "<div class='fb-like' data-href='$link' data-send='false' data-layout='button_count' data-show-faces='false' data-action='like' data-share='false'></div>"; $hatena = "<a href='http://b.hatena.ne.jp/entry/$link' class='hatena-bookmark-button' data-hatena-bookmark-title='$title' data-hatena-bookmark-layout='standard-balloon' data-hatena-bookmark-lang='ja' title='このエントリーをはてなブックマークに追加'><img src='http://b.st-hatena.com/images/entry-button/button-only.gif' alt='このエントリーをはてなブックマークに追加' width='20' height='20' style='border: none;' /></a>"; $google_plus = "<div class='g-plusone' data-size='medium' data-href='$link'></div>"; $pocket = "<a data-pocket-label='pocket' data-pocket-count='horizontal' class='pocket-btn' data-lang='en'></a>"; $social_button_html = '<div id="fb-root"></div>'; $social_button_html .= '<ul class="social_buttons">'; $social_button_html .= "<li>$twitter</li>"; $social_button_html .= "<li>$facebook</li>"; $social_button_html .= "<li>$hatena</li>"; $social_button_html .= "<li>$google_plus</li>"; $social_button_html .= "<li>$pocket</li>"; $social_button_html .= '</ul>'; return $social_button_html; } 123456789101112131415161718192021 function get_social_button_html($post_id) {    $link  = get_permalink($post_id);    $title = get_the_title($post_id);     $twitter     = "<a href='https://twitter.com/share' class='twitter-share-button' data-via='nigauri' data-lang='ja'>ツイート</a>";    $facebook    = "<div class='fb-like' data-href='$link' data-send='false' data-layout='button_count' data-show-faces='false' data-action='like' data-share='false'></div>";    $hatena      = "<a href='http://b.hatena.ne.jp/entry/$link' class='hatena-bookmark-button' data-hatena-bookmark-title='$title' data-hatena-bookmark-layout='standard-balloon' data-hatena-bookmark-lang='ja' title='このエントリーをはてなブックマークに追加'><img src='http://b.st-hatena.com/images/entry-button/button-only.gif' alt='このエントリーをはてなブックマークに追加' width='20' height='20' style='border: none;' /></a>";    $google_plus = "<div class='g-plusone' data-size='medium' data-href='$link'></div>";    $pocket      = "<a data-pocket-label='pocket' data-pocket-count='horizontal' class='pocket-btn' data-lang='en'></a>";     $social_button_html  = '<div id="fb-root"></div>';    $social_button_html .= '<ul class="social_buttons">';    $social_button_html .= "<li>$twitter</li>";    $social_button_html .= "<li>$facebook</li>";    $social_button_html .= "<li>$hatena</li>";    $social_button_html .= "<li>$google_plus</li>";    $social_button_html .= "<li>$pocket</li>";    $social_button_html .= '</ul>';     return $social_button_html;} テンプレートを直いじりして出力させたい場合は <?php reverberate get_social_button_html($post->ID) ?> でいける。 作成した HTML を記事の末尾に追加 テンプレート直いじりが嫌な場合はフィルターフックを使用する。 functions.php PHP add_filter('the_content', 'add_social_buttons', 1000); function add_social_buttons($content) { global $post; if (is_single() || is_page()) { return $content . get_social_button_html($post->ID); } return $content; } 12345678 add_filter('the_content', 'add_social_buttons', 1000);function add_social_buttons($content) {    global $post;    if (is_single() || is_page()) {        return $content . get_social_button_html($post->ID);    }    return $content;} add_filter の優先度は他のプラグインなどとの絡みもあると思うので各自調整。表示条件も好きにいじろう。 上の例では記事と固定ページでのみ、コンテンツの下部に表示するようにしている。 CSS の修正 好きに修正すればいいと思うよ。最低限 css file CSS ul.social_buttons li { float: left; list-style-type: none; } 1234 ul.social_buttons li {  float: left;  list-style-type: none;} くらいは必要か。 参考 【WordPress】 TwentyTwelveにソーシャルボタンをプラグインなしで追加する | work.log 上記を参考に一部修正してあります。 また上記サイトにはソーシャルボタン用スクリプトの最適化方法も載っていますが、WordPress 同梱の jQuery が使えないことによるトラブルを回避するため、かつ他のボタンを同様の手順で追加しやすいという拡張性を考え、あえて従来の方法を採っています。 TwitterFacebookGoogleBookmark続き印刷メールアドレスRSSPocketPinterestTumblrRedditLinkedInTelegramWhatsAppSkypeFeedly7 ナビゲーション技術情報 Java WordPress プラグイン Page List Widget プラグイン Insert Estimated Reading Time 自作プラグインをWordPressの公式ディレクトリに登録する WordPress カスタマイズメモ WordPress 3.7 で検索結果の表示順を日付の降順にする ショートコードの作り方 ソーシャルブックマークを追加する タグクラウドのカスタマイズ 特定のプラグインの更新通知を非表示にする 画像サイズの追加 アップロードできる拡張子を追加する functions.php を分割する 仮想 robots.txt に記述を追加する メタ情報ウィジェットからいらない項目を削除する 管理バーのうちいらない項目を削除する 管理画面用のCSSの追加 Jetpackの関連投稿のカスタマイズ ページ分割時に全ページ分の目次を出力する（要TOC+） テーマ Basic カスタマイズメモ 日本語化ファイル置き場 使用しているプラグイン 今回行ったセキュリティ対策について WordPress インストールメモ Linux Plone その他 最近の日記 あそびもとちゃん2018/07/31夏だ一番！だらけ猫祭り2018/07/30ビアレッティ モキッシマ2018/07/29ザ・グッド・ファイト シーズン12018/07/01倉式珈琲店 珈琲専門店のかき氷カフェウィンナー2018/04/30 最近の記事 Vivaldiブラウザー導入メモ2018/03/30LINE着せかえも作った2018/02/07自作LINEスタンプ・着せかえ2018/01/26LINEスタンプを作った2018/01/19ページ分割時に全ページ分の目次を出力する（要TOC+）2017/12/14 Twitter – nigauri @nigauri からのツイート サイトマップ プライバシーポリシー お問い合わせ ↑ Copyright © 2000-2018 nigauri All rights reserved. メールで送信 お名前 メールアドレス キャンセル 投稿を送信できませんでした。メールアドレスを確認してください。 メール送信チェックに失敗しました。もう一度お試しください。 このブログではメールでの投稿共有はできません。