wordpressを公開する前に最低限必要なプラグイン10個

wordpressのプラグイン名は英語表記が多いので、名前をみてもこれなんのためのプラグインだっけ・・?となることが多い。

最近依頼を受けてwordpressを構築する機会が増えて来たのもあり、これを機会にインストールしているプラグインを整理してみたいと思います。

基本要件

  • wordpress のバージョン 3.5
  • マルチサイト運用はしていない

Akismet

デフォルトで入っているプラグイン。

コメントやトラックバックをスパムから守ってくれる(らしい)。

特に理由が無ければ有効化しておく。俺のサイトはコメント使わないぜと言うのであれば必要なさそうだが。

AntiVirus

そのまんまだが、アンチウイルスプラグイン。

使用しているテーマに悪意のあるコードが無いかをスキャンしてくれる。

wordpressのテーマは無料で使用できる物が沢山溢れているが、テーマはデザイン性のみならずPHPコードなど危険なコードも埋め込めてしまうためwordpress公式サイトに乗っているテーマから選ぶのが基本です。

と解っていてインストールしていたものの、一回もスキャンしてなかったのでしてみたら自分で作った子テーマでウイルスが検出されたw

WS000007

iframeタグなんかに反応していた模様。

ちゃんと仕事してるな。うん。

AntiVirusのダウンロード

cbnet Ping Optimizer

pingの操作をできるプラグイン。

詳しくは以下のサイトが解りやすかったので参照。

WordPressにcbnet Ping Optimizerを導入しping送信を管理する方法

Google XML Sitemaps

これもそのまんまですが、サイトマップを作成してくれるプラグイン。SEO的に必須かと。

ウェブマスターツールなどへのサイトマップ登録はこれで生成したものを送信すれば便利。

詳しくは以下のサイトが解りやすかったので参照。

WordPressのサイトマップ(sitemap.xml)作成用プラグイン『Google XML Sitemaps』

HeadSpace2

こちらも、SEO系のプラグイン。

有名どころだと All-in-one SEO Pack があるがそちらよりも高機能らしい。

詳しくは以下のサイトが解りやすかったので参照。

WordPressのSEOに千手観音プラグイン、HeadSpace2・使用方法まとめ

Open Graph Pro

所謂、OGP対応をしてくれるプラグイン。

OGPはもんのすごく簡単に言うと、SNSへの投稿した際の見栄えを整えることです。

詳しくは以下のサイトが解りやすかったので参照。

WPプラグイン「Open Graph Pro」でFacebookページを楽々更新!エラーも克服!

SyntaxHighlighter Evolved

これはかなり個人的と言うか、このブログの特性上必須なプラグイン。

ソースコードを記事中に記載したい場合に見栄えよく記述することができるプラグイン。

<?php

echo 'Hello World!!';

?>

こんな感じにソースコードを表現できる。

詳しくは以下のサイトが解りやすかったので参照。

ソースコードをキレイに表示するWordPressプラグイン「SyntaxHighlighter Evolved」

Ultimate Google Analytics

wordpress への google analytics  導入を簡単にしてくれるプラグインです。

インストールして、トラッキングコードを入力するだけでいいのでとっても楽です。

設定の仕方は以下の記事がわかりやすかったです。

アクセス解析Google Analyticsを自動設定してくれるUltimate Google Analyticsプラグイン

WP Multibyte Patch

デフォルトで入っているプラグイン。

日本語で使う場合にいろいろやってくれているようです。

デフォルト入っているので、特に気にしたことは無かったのですが実は色々やってくれてるみたいです。

詳細は以下から。

http://eastcoder.com/code/wp-multibyte-patch/

WP Social Bookmarking Light

ソーシャルボタンを簡単に導入できるプラグイン。

twitter、Facebookなどのボタンが簡単に設置できます。

最近だとLINEへ送るボタンなども追加されているので重宝します。

設定の仕方は以下の記事がわかりやすかったです。

WP Social Bookmarking Lightを導入しソーシャルボタンを設置する方法

こうやって、記事にしてみてプラグインを一つ一つ見直してみるとインストールだけして設定していないプラグインやお、これいいじゃん!でインストールして使っていないプラグインの多いこと・・

無駄なプラグインは、サーバーの容量を消費するだけなのできちんと選定して使用しないとなと反省。

WP Social Bookmarking Lightに「ラインで送るボタン」が追加されている件

以前に wordpressに公式のLINEで送るボタンを設置する方法 と言う記事を書いたがもっと簡単な方法が。

「WP Social Bookmarking Light」 と言うwordpressプラグインをご存知だろうか。

導入方法はこちらのサイトが解りやすいので↓を確認して頂きたい。

WP Social Bookmarking Lightを導入しソーシャルボタンを設置する方法

このプラグインに「ラインで送るボタン」が追加されているので、既に導入している方は設定から簡単に追加することができる。

social-bookmark

設定 > WP Social Bookmarking Light を選択

WS000005

「line」をドラッグ&ドロップで左側に移動して「変更を保存」で完了。

とっても簡単ですね。

eclipse + phonegapで日本語が文字化けして直したメモ

Androidアプリを作りたいなと思い立ち、使ったこともないecripseと格闘している真っ最中です。
俺です。

実機でアプリをテスト起動する所までなんとか行ったのですが、起動した所で日本語が文字化け。
文字バケーション。

思ったよりハマってしまったのでメモする。

まず、先にほぼ結論に近いチェック項目。
文字コードはWEBエンジニアらしくUTF-8を前提に進める。

  1. ecripse自体の文字コードの設定はUTF-8になっているか。
  2. ファイル自体の文字コードはUTF-8になっているか。
  3. metaのcharsetはUTF-8になっているか。

ecripse自体の文字コードの設定はUTF-8になっているか。

これは以下のサイトが解りやすかった。

テキストファイルの文字コード

ファイル自体の文字コードはUTF-8になっているか。

characode

以外と抜けてしまうファイル自体の文字コードの設定。
画像は秀丸エディタの設定。

metaのcharsetはUTF-8になっているか。

<meta charset="UTF-8">

1と2を試しても文字化けが直らず最終的にこれに気づいて文字化けが直った。

phonegapで生成されるアプリは、webブラウザが内臓されていてブラウザによって描画されるということを理解して

いなかったのでなかなか気づくことができなかった。

先は長そうだ。

wordpressに公式のLINEで送るボタンを設置する方法

本日ついに、LINE公式「LINEで送る」ボタンがリリースされました!

早速、設置してみたのでやり方を記しておきます。

まずは、LINE公式から画像をダウンロードします。(ページ最下部)

WS000001

LINE公式

設置方法|LINEで送るボタン

line_send

メディア > 新規追加

line_send2

ダウンロードした画像を解凍して、使いたいボタンの画像をメディアに追加します。

WS000000

 

画像の編集画面から、アップロードした画像のURLをコピペします。

 


<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

先ほどコピペした画像のURLを、[ボタン画像のURL]の部分にコピペします。

WS000002

[ボタン幅][ボタン高さ]は適切なサイズが↑の様に記載されていますので
合わせると綺麗に表示される様です。


<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="http://sugerich.com/blog/wp-content/uploads/2012/12/linebutton_36x60.png" width="36" height="60" alt="LINEで送る" /></a>

以上を踏まえると私のサイトですと、こんな感じのコードになりました。

facebookアプリから勝手にタグ付けされない設定をする方法

よく勝手にタグ付けされて怒ってる友達や、困ってる友達を見るのでiphoneやandroidから設定する方法をメモします。

facebook-tag1

メニューから「プライバシー設定」をタップ

facebook-tag2

「タイムラインとタグ付け」の「設定を編集」をタップ

facebook-tag3

「あなたがタグ付けされたコンテンツをタイムラインに掲載するかどうかを確認する」の「編集」をタップ

facebook-tag4

「タイムライン掲載の確認をオンにする」をタップ

facebook-tag5

「完了」をタップで終わり。

ただ、注意点としてはあくまで自分のタイムライン上に表示するかどうかだけをコントロールできる物です。

タグ付けした人のタイムライン上には表示されます。

完全にタグを削除したい場合は、タグ付けした本人に依頼する必要があります。

以下の記事が分かりやすかったです。

Facebookの「写真のタグ付け」を編集削除する方法 2012.5版

PC版の設定方法は、ライフハッカーさんの記事が分かりやすいかと思います。

Facebookでの「写真のタグ付け」を承認制にする方法

 

 

ちなみに、この設定をした後にタグ付けされると登録しているメールアドレスに以下の様なメールが届きます。

facebook-tag6

 

「投稿を確認」からタグ付けされた写真やチェックインを承認することが出来ます。

facebookグループの通知をオフにするやり方

最近facebookで勝手にグループに追加されて、どうでもいい投稿通知が大量に届いてハゲそうだったので設定しました。

パソコンから設定する場合

fb_group

左下のグループの一覧から通知をオフにしたいグループにマウスを持って行きます。

そうすると、鉛筆のマークが出るのでそこから「設定を編集」をクリック

fb_group2

プルダウンから「オフ」を選択して「変更を保存」をクリックして完了です。

スマートフォンのfacebookアプリから設定する場合

fb_group3

設定したいグループのページに移動してから、グループ名をタップ。

fb_group4

スマートフォンのロゴをタップ。

fb_group5

プッシュお知らせオフ」をタップして完了。

スマートフォンはandroidですが、iphoneでも同じ設定の仕方でいけるはずです。

「jQuery HighchartsTable」 の使い方

jqueryを使ってtableを簡単にグラフ化してくれるプラグイン「jQuery HighchartsTable」を使ってみました。

「jQuery HighchartsTable」を使えば、以下の様なグラフをtableから簡単に生成してくれます。

WS000015
WS000016
WS000017

「jQuery HighchartsTable」のusageでは、以下の様にファイルを読み込めば使えると記述されています。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery.highchartsTable.js"></script>

3つのファイルを読み込む必要があります。

jquery本体はいいとして、「highcharts.js」と「jquery.highchartsTable.js」の二つをダウンロードしなければなりませんがこの二つは別々の場所からダウンロードします。

highcharts.jsのダウンロード

jquery.highchartsTable.jsのダウンロード

ここでちょっと罠というか、スペルミスがあって実際にダウンロードされるファイルは jquery.highchartTable.js なのに対し読み込む記述のサンプルは

<script type="text/javascript" src="jquery.highchartsTable.js"></script>

と記述されています。

jquery.highchartsTable.js

」が抜けているのでファイル名を jquery.highchartsTable.js に変更してあげましょう。

サンプルを以下に用意しました

jQuery HighchartsTableのサンプル

詳細は以下から

jQuery HighchartsTable

以下のサイトを参考にさせて頂きました。

テーブルをグラフに変換してくれるjQueryプラグイン

google analyticsで、自分のアクセスを除外する一番簡単な方法

それは、ブラウザにプラグインをインストールすることです。
以下、google chrome を使用している場合。

Google アナリティクス オプトアウト アドオン

「Google アナリティクス オプトアウト アドオン」にアクセス
WS000008

chromeに追加をクリック
analytics

「追加」をクリックでインストール完了
WS000010

自分のgoogleアカウントでchromeを同期している場合は他の端末からアクセスしても除外されているはずです。(未検証)

また、chrome以外のブラウザにも(Firefoxならアドオン)が用意されている用なので
同じ要領でインストールすれば良いでしょう。
同じパソコンでも、異なるブラウザでインストールする必要があるので注意です。

Google アナリティクス オプトアウト アドオン

スマートフォンからwordpressの記事の更新をしてみる。

わー、すごい。
Androidからも、記事更新できるのねん!

2012-12-13 13.51.02

Chromeブラウザから、投稿してます。
流石にやりづらいですが、なんとか出来るレベル。

せめて、Nexus7くらいだったらやりやすいんだろうな・・

twitter bootstrap関連の便利なサイトまとめ

WS000003

ノンデザイナーな自分がweb開発に最早必須になっている「twitter bootstrap」 そんな twitter bootstrap を更に便利に使うためのサイトを自分のメモがてらにまとめてみようと思います。

2013/01/13 Bootstrap Tour を追加しました。

twitter bootstrap の基礎(ドットインストール)

WS000011

youtubeを使ってプログラミングを懇切丁寧に教えてくれる ドットインストール さんの「twitter bootstrapの基礎」レッスンです。

そもそも、twitter bootstrap ってなに?って所から初めてくれるのでプログラミング初心者の方に最適です。

自分も手っ取り早く学びたい時には、色々なサイト調べるより解りやすいのでよく利用させて頂いてます。

twitter bootstrapの基礎

 

twitter bootstrap の便利なコードスニペット集「Bootsnipp」

コードスニペットとは、簡単に言うとコピペで使えるサンプルコードの事です。

↑こんなボタンのパーツや

こんなメニューリストも

コードスニペットをコピペで出来ちゃいます。

twitter bootstrap の機能全てを使いこなすのはなかなか難しいと思いますがここからインスピレーションを得たりするのにも役立ちそうですね。

bootsnipp.com

twitter bootstrap と組み合わせて編集フォームをカッコよくする「Editable for Bootstrap」

twitter bootstrp を拡張して編集フォームのユーザビリティを上げてスタイリッシュにしてくれます。

jQueryとBootstrapを読み込んで・・

	<link href="path/to/bootstrap/css/bootstrap.css" rel="stylesheet" /><script type="text/javascript" src="path/to/bootstrap/js/bootstrap.min.js"></script>

ダウンロードしたbootstrap-editableのファイルをプラグイン的に読み込むだけ

	<link href="path/to/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet" /><script type="text/javascript" src="path/to/bootstrap-editable/js/bootstrap-editable.min.js"></script>

ダウンロード&詳細は以下からどうぞ

Editable for Bootstrap

twitter Bootstrap と組み合わせて見出しを装飾できるcss

作者の方も仰ってますが twitter bootstrap は便利なんだけど意外と見出し(h1タグなど)の装飾が無いんですよね。

このエントリーはデザインができない自分にとってはとてもありがたかったです! 画像には一部しかありませんが、提供して下さっているcssを読み込めばかなりの数の見出しのパターンが使えますのでとってもオススメです。

使い片などの詳細は作者の方のブログが分かりやすいので参照してください。

twitter Bootstrap で見出しを装飾したい

twitter bootstrap の過去のバージョンをダウンロードできる「Bootstrap History」

 説明の必要も無いくらいそのままですが、twitter bootstrap の過去のバージョンを網羅してダウンロードすることができます。

特に、1.2.0、1.4.0、2.0.0辺りは大きく変更があるので元ファイル欲しいなーとか過去のバージョンの方が使い安かったなと言う場合には重宝するので覚えておいて損はないと思います。

Bootstrap History

モックアップをcacoo的に作れる「Div Shot」

今回、紹介するサイトで一番凄いなと思ったオンラインツール。

もっと早く知っていれば・・

左がbootstrapのモックアップ画面で右にタグの名前がズラリ。
WS000007

例えばbuttonタグをドラッグして
WS000004-001

右のモックアップ画面にドロップすると・・
WS000006

buttonが出来た!
divshot5

更にHTMLファイルをダウンロードして使うことも可能。
WS000001

Div Shot

twitter bootstrapでサイトツアーを実装できる「Bootstrap Tour」

WS000008

↑こんな感じでサイトの使い方を説明する時に便利なやつです。

イメージが沸かない方はデモを参照。

デモ

ダウンロードはgithubから

ダウンロード

使い方詳細は以下から

使い方詳細