サイトにソーシャルボタンを表示する

今日も AGITO Labs のカスタマイズのお話です。

本日は「WP Social Bookmarking Light」というプラグインを使ってこのサイトにソーシャルボタンを設置してみます。

 

まずは「WP Social Bookmarking Light」をインストール

詳しく説明するまでもなく、こちらの記事を参考にプラグインをインストールして有効化します。

 

プラグインの設定

プラグインをインストールしたら、設定画面にアクセスして設定を行います。

WordPressのダッシュボードにログインし、左サイドバーの「設定」→「WP Social Bookmarking Lite」をクリックします。

menu of WP Social Bookmarking Light

 

プラグインの設定画面が表示されますので、
まずはソーシャルボタンを表示する位置と表示する記事の種類(投稿もしくは固定ページ)、表示するソーシャルボタンを選びます。

settings of WP Social Bookmarking Light

今回は

  • Twitter
  • Facebook
  • Google Plus One
  • はてな
  • Evernote
  • Pocket

の6種類のソーシャルボタンを表示するようにしてみました。

ソーシャルボタンを選んだら、個別のボタンの設定を行います。

 

まずはTwitterから。

for Twitter

見た目をシンプルにするために、あえて言語は「英語」を選択しています。

 

次にはてな。

for Hatena

 

そしてFacebookの設定(設定のタブは2つに分かれています)。

for FB

for FB like

 

以下はEvernoteのクリップボタンの設定。

for Evernote

 

Google Plus Oneの設定。

for Google Plus One

 

最後にPocketの設定。

for Pocket

 

以上を入力し終わったら、左下の「変更を保存」ボタンをクリックして設定を完了します。

 

ソーシャルボタンの表示を確認

以上の手順が終了したら、サイトの個別ページを開いてソーシャルボタンがちゃんと表示されているかを確認します。

 

当サイトの場合は以下のようになりました。

complete display social buttons!

 

以上でソーシャルボタンの設置は完了です。

 

サイトの画像をFlickrで管理する

今日は当サイトに掲載している画像ファイルの保存先について書いてみようと思います。

通常の画像ファイルの保存先

WordPressでは、サイトにアップロードする画像は「メディア」として扱われ、その保存先はWordPressがインストールされているサーバー内となります。

また画像をアップロードしたときにサーバ内に保存されるのは、

  • オリジナルの画像ファイル
  • 大サイズにリサイズされた画像ファイル
  • 中サイズにリサイズされた画像ファイル
  • 小サイズにリサイズされた画像ファイル

の最低4ファイル。

このため、高画質の画像を大量にアップロードした場合、サーバーのディスク容量を圧迫してしまい、最悪の場合はWordPressが動かなくなってしまう・・・という事態もあり得るかもしれません。

また、たとえディク容量が十分にあるサーバーを使っていたとしても、万が一「WordPressサイトを別のサーバーにお引越しする」となったときに、アップロード済の画像ファイルをすべて新しいサーバーにコピーするのは気の遠くなるような作業です。

 

それらを見越して、当サイトでは、サイトに掲載する画像ファイルはすべて外部サービスの「Flickr」に保存し、記事には Flickrの画像リンク を掲載するようにしています。

 

画像ファイルの保存先をFlickrにする

以下、WordPressとFlickrとの連携方法について書いていきます。

Flickrのアカウントを作成

まずはFlickrを利用するため、米 YAHOO! のアカウント登録を行います(すでにアカウントがある場合はこの作業は不要です)。

具体的な登録方法については以下のページ

が参考になるかと思います。

WordPressにプラグイン「Remote Media Libraries」をインストール

Flickrの画像をWordPressで簡単に使えるようにするにはプラグインをインストールする必要があります。

FlickrとWordPressを連携させるためのプラグインは様々存在しますが、今回は「Remote Media Libraries」を利用してみることにしました。

プラグインのインストール方法と有効化は以前の記事を参考にしてみてください。

FlickrのユーザーNSIDを確認

「Limote Media Libraries」でFlickrの画像にアクセスするために、Flickr User NSID というものを確認しておく必要があります。以下はNSIDの確認方法。

米 YAHOO! のアカウントが取得できたら Flickr にサインインします。

サインイン後、画面左上のメニューから「Alubums」をクリック。

Go to Alubms Page

Albumsページが表示されたら、ウェブブラウザのアドレス欄を確認します。

Flickr USER NSID

「XXXXXXXXX@NXX(Xは数字)」という文字列が Flickr User NSID となります。

Flickrとの連携設定

WordPressのダッシュボードにアクセスし、左サイドバーメニューの「メディア → Remote Libraries」をクリック。

Remote Library の一覧画面が出てくるので「Add New」ボタンを押して新規作成画面を表示します。

Add Remote Library

新規作成画面で必要事項を入力します。先ほど確認した Flickr User NSID もここで入力。

Input Remote Library info

入力が完了したら画面右側の「Validate」ボタンをクリックしてみて、Flickerとの連携が正常におこなわれることを確認します。

Validate and Publish

 

最後に「公開」ボタンを押せば完了。

ちなみにここで「公開」ボタンを押しても、この Remote Library 設定内容は一般公開されませんので安心してください(笑)

Flickrのアルバムに画像をアップロード

以上で WordPressとFlickrの連携が可能となったはずなので、早速試してみます。

まずは Flickrに画像をアップロードし、写真の公開範囲を「public」にしておきます。

操作方法がいまいちわからない場合は以下のサイト

が参考になるかもしれません。

記事にFlickrの画像を挿入してみる

それでは早速、WordPressの投稿記事ににFlickrの画像を挿入してみます。

 

まずは WordPressのダッシュボードの左メニューから「投稿 → 新規追加」をクリック。

新規投稿画面が表示されるので、「メディアを追加」ボタンをクリックします。

Add new post

メディア挿入用のポップアップ画面が表示されますので、
左側の「Insert Flickr」をクリックするとFlickrに保存した画像(publicのもののみ)が一覧表示されます。

View Flickr images

 

挿入したい画像を選択し、サイズを指定して「投稿に挿入」ボタンをクリック。

Insert image from Flickr

以上の操作で、投稿の本文にFlickrの画像が挿入されます。

Complete insert Flickr image

以上、案外簡単にFlickrと連携することができました。

上記の手順で一番面倒なのは、米 YAHOO! のアカウント登録かもしれませんね (^ ^;

 

ちなみに今回インストールした「Limote Media Libraries」というプラグインは、Flickrとの連携だけでなく Instagram とも連携できるみたいですので、また機会をみつけて試してみたいと思います。

いちばん初めにインストールしたプラグイン

プラグインとは、WordPressの機能を拡張するツールのこと。

WordPressの利用者は、自分の目的にあったプラグインを選んでインストールすることで、WordPressを使いやすくカスタマイズすることができます。

今日はそんなWordPressのプラグインについて書いてみようと思います。

 

プラグインの導入方法

まずはじめにプラグインの導入方法から。

WordPressにプラグインを導入するには、「プラグインを自分でダウンロードして手動でWordPressに配置する方法」と、「WordPressの管理画面から導入したいプラグインを検索して自動インストールする方法」の2つがあります。

プラグインを自作した場合は前者の方法で導入することになりますが、今回は後者の方法を説明したいと思います。

 

ダッシュボード(WordPressの管理画面)にアクセスし、左サイドバーの「プラグイン」メニューから「新規追加」をクリックします。

プラグインの新規追加

プラグインの検索画面が表示されるので、インストールしたいWordPressプラグインを検索します。

目的のプラグインをみつけたら「今すぐインストール」をクリック。

プラグインを検索してインストール

プラグインのインストールが開始されるので、完了するまで少しだけ待ちます。

インストールが終わったら、「プラグインを有効化」というリンクをクリック。

プラグインの有効化

プラグイン一覧画面で、対象のプラグインがインストールされていることを確認します。

プラグインの有効化完了

以上でプラグインのインストールは完了です。

プラグインによっては設定が必要なものもあります。
プラグインの設定画面には、ダッシュボードの左サイドバーの「設定」メーニューから行くことができます(プラグインによっては別のメニューに設定画面が追加されることがあります)。

プラグインの設定

 

いちばん初めにインストールしたプラグイン

以下では当サイト(AGITO Labs)にインストールしているプラグインを紹介します。

WP Multibyte Patch

日本語版のWordPressにはじめからインストールされているプラグインです(手動で有効化する必要あり)。

英語圏で開発されたWordPressの、日本語の取り扱いについての様々な不備を裏でリカバリーしてくれます。

Akismet

スパムコメント防止の機能を持つプラグインです。WordPressにプリインストールされている定番のプラグイン。

利用にはアカウント登録(無料)をしてAPIキーを取得する必要がありますが、サイトにコメント欄を設ける場合は必須のプラグインとなります。

Google XML Sitemaps

検索エンジン向けのサイトマップを生成し、記事を更新したタイミングで自動通知するためプラグインです。
検索エンジンにサイトのコンテンツを認識してもらいたいときは必須。

Custom CSS/JS

適用しているテーマのファイルをいじることなく、独自のスタイルシートやJavascriptの記述をサイトに追加できるプラグインです。

このプラグインをインストールすることにより、適用中のテーマのスタイリングの変更を行うことができたり、Google Analytics のトラッキングコードをヘッダーに埋め込むことができたりなどが可能となります。

 

以上、他にもインストールしておくと便利なプラグインは様々ありますが、とりあえず必要最小限と思うものだけをピックアップしてみました。