SEEDS Creator's Blog

【WordPress】実務で使える!おすすめプラグインをまとめてみました


WordPressでの開発を主に担当している、
フロントエンドエンジニアのトウヤマです。

後輩エンジニアのために、そろそろ「WordPress関連の情報をまとめてあげないとな」って考えていたら、
なぜか、それならいっそブログにまとめてしまおう!ということになってしまいました……

というわけで、今回は、
ここ最近で使ってみて、今後も実務で使い続けたい!便利な「WordPress おすすめプラグイン」を7つまとめてみましたのでご紹介します。

Advanced Custom Fields

Advanced Custom Fields
Advanced Custom Fields

弊社では有料版のProを使用。
とりあえず入れないと開発ができないくらいです。


Options PageFlexible Contentは多用しています。



Custom Post Type Permalinks


更新箇所が2つ以上ある場合に使用。


例えば、NEWSとブログという時にNEWSのURLは「ID」でいいけど、ブログはURLを自由に設定したい!というときに便利。
カスタム投稿タイプのページャーまで設定してくれるのもありがたい。


※Custom Post Type Permalinks 1.0.0以上で下記の設定には注意。 Custom Post Type Permalinks 1.0.0以上で発生する、カスタム投稿へのパーマリンクが404になってしまう現象について。

Category Order and Taxonomy Terms Order


Category Order and Taxonomy Terms Order
カテゴリが多い場合によく活躍します。


カテゴリ一覧の順番を「登録順ではなくその都度入れ替えたい!」という依頼がよくあります。そういうときには、このプラグインで対応することが多いです。

AJAX Thumbnail Rebuild


AJAX Thumbnail Rebuild
サムネイルを複数作成する場合。


開発途中でサムネイルを作成しなおすような場合に使います。

AddQuicktag


AddQuicktag
◎更新する方がHTMLを書けない場合。


独自で作ったスタイルを登録し、更新者はボタンを押してタグを押すだけで、 入力が可能になります。

MW WP Form


MW WP Form
コンタクトフォームを作成する場合。


確認画面付きのフォームが作成されるプラグイン。
バリデーションの種類も豊富です。

MW WP Formの注意点については、過去にブログで書いてます。こちらも合わせてどうぞ。 [article link=3530]

Any Mobile Theme Switcher


Any Mobile Theme Switcher
スマホ対応である場合。


ユーザーエージェントの判定でテンプレートの切り替えが可能になります。

まとめ

プラグインを入れたら、予期せぬバグが発生したり、ページが重たくなった!なんてことも発生します。

最低限必要なプラグインのみインストールして、シンプルで分かりやすいWordPressの設計を心がけたいですね。






Vagrantのboxサイズを拡張する

提供されているboxが8GBしかなかったので拡張したのですが、結構大変だったのでメモします。

ディスクの拡張

boxから普通にインスタンスを作成。 インスタンスを作成したらシャットダウンして作業を行います。

VirtualBoxではディスクサイズが可変のタイプは .vdiなのですが、 Vagrantのboxとできるディスクタイプはvmdkとなります。 まずは、現在のvmdkディスクをクローンしてvdi形式のディスクを作成します。

その後、カレントディレクトリを作成した仮想サーバのディスクがある所まで移動して

VBoxManage clonehd "box-disk1.vmdk" "clone-box-disk1.vdi" --format vdi

クローンしたディスクの容量を拡張します。ここでは20GBにしたいと仮定して20480を設定しています。 (20(GB) * 1024(MB) = 20480)

VBoxManage modifyhd clone-box-disk1.vdi --resize 20480

次に、ディスク拡張されたvdiをvmdkにクローンします。

VBoxManage clonehd "clone-box-disk1.vdi" "box-disk2.vmdk" --format vmdk

拡張したディスクを差し替えます。 この作業は、VirtualBoxから行ってもいいかもしれません。 --port 0 --device 0 の部分はbox-disk1.vmdkが入っていたものを指定します。 ちなみに、server_default_1448874918650_80404 は仮想サーバー名です。

VBoxManage storageattach server_default_1448874918650_80404 --storagectl "SATA" --port 0 --device 0 --type hdd --medium box-disk2.vmdk

この設定を行った後、起動してみて無事に起動すればOKです。 確認できたら、またまたシャットダウンします。

パーティション操作

現在ディスクは20GBに拡張しましたが、パーティションは8GBまでしか使用されていない状態です。 パーティションを操作して、8GBを20GBに拡張します。

新たに作成された box-disk2.vmdk を適当な仮想サーバにアタッチします。 アタッチ後、lsblkコマンドでディスクの様態をチェック。

# lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
sda    202:65   0   8G  0 disk /
└ sda1 202:145  0   1G  0 part 
└─sda2 202:145  0   8G  0 part 
sdb    202:144  0  20G  0 disk 
└ sdb1 202:145  0   1G  0 [SWAP]
└─sdb2 202:145  0   8G  0 part 

今回くっつけたものはsdbとして認識されていました。 partedでパーティション操作を行っていきます。

ない場合は、 yum install parted か apt-get install partedでインストールします。

# parted /dev/sdb
GNU Parted 2.1
/dev/sdb を使用
GNU Parted へようこそ! コマンド一覧を見るには 'help' と入力してください。

表記をセクターに変更します。

(parted) unit s

現在の情報を表示します。

(parted) print
Model: ATA VBOX HARDDISK (scsi)
Disk /dev/sda: 41943040s
Sector size (logical/physical): 512B/512B
Partition Table: msdos

Number  Start     End        Size       Type     File system     Flags
 1      2048s     1953791s   1951744s   primary  linux-swap(v1)
 2      1953792s  15988735s  15986688s  primary   ext4            boot

この情報はあとで使用するため、メモしておきましょう。 今回は、特にNumber2の行が重要になります。

次に、パーティションを削除します。

(parted) rm 2    

パーティションを作成します。

(parted) mkpart
Partition name? []? 
File system type? [ext2]? ext4
Start? 1953792s
End? 100%

パーティションサイズ以外は、元のパーティションと同じになるように修正します。

(parted) set 2 boot on
(parted) set 2 LBA off

ここまでできたら、EndとSize以外は元と同じになっているか確認します。

(parted) print
Model: ATA VBOX HARDDISK (scsi)
Disk /dev/sda: 41943040s
Sector size (logical/physical): 512B/512B
Partition Table: msdos

Number  Start     End        Size       Type     File system     Flags
 1      2048s     1953791s   1951744s   primary  linux-swap(v1)
 2      1953792s  41943039s  39989248s  primary  ext4            boot

終了!

(parted) quit

20GBに拡張されていることを確認します。

# lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
sda    202:65   0   8G  0 disk /
└ sda1 202:145  0   1G  0 part 
└─sda2 202:145  0   8G  0 part 
sdb    202:144  0  20G  0 disk 
└ sdb1 202:145  0   1G  0 [SWAP]
└─sdb2 202:145  0  19G  0 part

念のため、ディスクチェックをかけましょう。

e2fsck -f /dev/sdb2

ここまでできたら、適当な仮想サーバをシャットダウンしてディスクを外します。

パーティション拡張したディスクで起動

インスタンスを起動します。

resize2fs /dev/sda2

ここで、サイズが20GBに拡張されたら完了です。

box作成

あとはVagrantfileがあるディレクトリでboxを作成して終了です。

vagrant package

Codecademyをやってみた

こんにちは、WEBエンジニアのyuchiです。

最近、WEB上でプログラム学習ができる無料のサイトがたくさん作られていますよね。 そんな多々あるサービスの中で、私は以前「Codecademy」というサービス(もちろん無料)を使って勉強してみました。

○Codecademy http://www.codecademy.com/

普段、私は主にPHPをさわっているので、今回は違う言語にチャレンジしようと思い、 よく使われている汎用なプログラミング言語「Python(パイソン)」を選択してみました。

すると、下記のような画面が出てきます。

 

 

「Codecademy」は日本語に対応していないようなので、説明は英語で書かれています・・・

 

とりあえず説明を読みながら、黒いエディター部分にプログラムを書いて、「Save & SubmitCode」をクリックしました。

 

書いたコードがOKだったら、右上の部分に結果が表示され、プログラムが実行されます。 このように、1つクリアすると次の章に進んでいき、徐々に基礎的なプログラミングが学べるようになっていました。 誰でも気軽に始められるので、初心者の方もこういったツールをぜひ活用してみてほしいです!

以上、終わります。

Tableの使用に際して

今回は、有名なCSSフレームワーク「Bootstrap」を使用した際に、個人的に発見のあった<table>の使用について書きます。

HTMLで<table>とは

自分がコーディングに興味を持ち始めたころは、「テーブル=食卓」のイメージがあり、「table=表」に違和感がありました。 また、コーディングを勉強し始めたころは、ゴリゴリとテーブルレイアウトでページを作成していたこともあります。 が、<table>とは、食卓ではなく、Webページのレイアウトをするモノでもなく、情報を伝わりやすくするためなどに 「表」を実現するタグです。

<table>は優秀

<table>は表の一つの列のセルの幅を内容に合わせて統一し調整してくれて優秀です! また、ウィンドウを縮めたり、内容のテキストが長い場合は自動で折り返してくれたりもします。 もちろんCSSで横、縦幅、罫線、テキスト位置などが調整できるので、デザインも自由に表現することが出来ます。

スマホでの<table>

しかし、そんなテーブルにも使用する上で問題がありました。 従来のPCの画面サイズで見ときは可読性に問題なく表示されている状態だったとしても、スマホなどの小さな画面サイズで 確認すると、テーブルの項目数が多く表示されてしまったりテキストの自動折り返しの影響でテキストがほぼ縦書きのような 状態になってしまうという問題が起こります。 また、それを回避しようとCSSの設定(折り返して表示させないなど)の親の幅を無視すると、思わぬデザイン崩れが起こって しまうことがあります。 課題として、そういったケースをどう表現するのが賢明なのかが悩みどころでした。

Bootstrapでの仕様

そこで冒頭に書きましたが、Bootstrapという有名なCSSフレームワークを使うことがあり、確認してみたところ、

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

と記述することで、一定幅以下の場合にはテーブルの親のCSSに"overflow-x: scroll;"が適用され、スクロールしてテーブルを 確認することが出来るようになるという仕様でした。 この方法だと、可読性を損なうことなくスマホでテーブルの実装を行うことができる!すごい!と、目からウロコでした。

まとめ

世の中には様々な技術があり、常日頃から学ぶ意識を持ち調べることが大切だと改めて実感しました。

MW WP Formを使って動かない時に確認したいこと


「Word Press」のコンタクトフォームと言えば「Contact Form 7」。 いつも迷うことなく利用し続けていました。 「Contact Form 7」といえば、海外で開発されているため、基本確認画面がありません
日本では確認画面が必要な案件が多く、「Contact Form 7」を使用するともれなく カスタマイズしなければなりません。
そうなると手間がかかってしまったり、精度が落ちてしまうという問題点が....

そこで、新しく話題に上がった「MW WP Form」を試しに使ってみました!

管理画面からの設定が簡単で、とても使いやすい!
ですが、実装してみたところ動かない!?という問題にぶつかってしまいました・・・

いろいろ調べてみましたが、比較的新しいプラグインということもあり情報が少ないのが難点。
有力な情報がなく困ってしまいました。
試行錯誤した結果、なんとか解決することができたので、その際の注意点をまとめたいと思います。

1.ループの記述がない。


<p>タグが入るのが面倒で、独自テンプレートに $post->post_content; だけを記述していることが 私はよくあります。

これではショートコードは展開できないので、

[code] if (have_posts()) :
while (have_posts()) :
the_post();
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
the_content();
endwhile;
else:
<p>記事がありません</p>
endif;
[/code]

こんな感じで書くとショートコードも展開出来て、無駄な<p>タグも除去できます。

2.wp_head();とwp_footer();が足りていない。


これは、プラグインが動作しない大半の原因ですね。
独自テンプレートを作る際どうしても忘れてしまいがちなので要注意です。

3.<form></form>タグが作成したページに入っている


私は、これに一番躓いてしまいました。
フォームのページをコーディングし、WordPressに組み込む際に、管理画面にそのまま貼り付けていました。
その時に3.<form></form>が残ってしまっていたようです。
「MW WP Form」は自動でコードを挿入してくれるので、それよりも中に
<form></form>タグがあると動きません。
きちんとチェックしなくてから組み込まないといけませんね。反省。

まとめ



実装してみた感想として、基礎的なところを見落としていたことが悔やまれます。
動作さえすれば、使い勝手もよく優れたプラグインなので、今後カスタマイズなどの記事も かけたらと思っています。



wifiやbluetoothってなに?

今やIT業界だけでなく、日常生活でも普通に使われているwifibluetooth。 一体これらが何なのか、物理学の博士号を取り損ねた僕が、知っている範囲で説明したいと思います。

wifibluetoothとは電磁波です

これらの正体は、電磁波と呼ばれるものです。 人体に悪影響があるとかないとかよく言われている、あの電磁波です。 ちなみに、太陽や蛍光灯の光も電磁波なのですが、中でも、蛍光灯は白かったり赤かったり青かったり、 様々な色がありますよね。 これは何が違うのか?というと、波長や周波数が違うため、違った色合いで見えるのです。

可視光

一般的に「光」と呼ばれているのは、私たちが見ることのできる 波長が約380nm〜780nm(1nm=0.000000001m)の電磁波のことを指します。 これを「可視光」と言います。 この範囲以外の電磁波は、私たち人間には見ることができません。

赤い光はだいたい780nm、青い光はだいたい400nmです。 この波長は、とても短いです。

マイクロ波

一方、wifibluetoothは「マイクロ波」と呼ばれていて、 波長が約100μm〜1m(1μm=0.000001m)の電磁波のことを言います。 あと、電子レンジで使っている電磁波もマイクロ波です。 こちらの波長は、可視光に比べると断然長いです。

電磁波の特徴

電磁波は、波長が長ければ長い程、壁などの障害物に邪魔されずに透過します。
みなさん、壁の向こうって見えないですよね?僕にはそんな能力はないです。 これは、光の波長が短すぎて、壁をすり抜けられずに反射したり吸収されたりするからです。 私たちが見ることができる「可視光」の電磁波も、同じ理由で障害物をすり抜けられません。

では、マイクロ波はどうでしょうか? 先ほど説明した通り、wifibluetoothは波長が長いため、違う部屋にwifiルーターを置いていても、 壁をすり抜けてパソコンやスマホwifibluetoothの電磁波を受信することができます。 つまり、パソコンやスマホで、壁の向こうのwifiを透視しているのです。 私たちも、もしwifiなどの電磁波を見ることができたら、壁の向こうを透視できるかもしれません!

最後に

いかがでしたか?普段何気なく使っているwifibluetoothですが、仕組みが分かると面白いですね。 書きたいことはもっとあるのですが、次回のお楽しみということで、今回はこれで終わります。

外部サイトからのDB接続について(MYSQL)

こんにちは、yagiyagiです。 早速ですが、本題に入ろうと思います。

 

外部サイトからDBサーバ(MYSQL)に接続する場合、セキュリティの観点から 通常、接続できません。権限を付与する必要があります。

GRANT ALL PRIVILEGES ON *.* TO スキーマ名@"%" IDENTIFIED BY 'passward' WITH GRANT OPTION;

ですね。ググるとよく見かけます。(詳細な説明は他サイトを参照してください) これで、少しハマってしまった経験があるので、ご紹介したいと思います。

どういう経緯かはよく覚えていないのですが、

GRANT ALL PRIVILEGES ON *.* TO hoge@"%" IDENTIFIED BY 'passward1' WITH GRANT OPTION;
GRANT ALL PRIVILEGES ON *.* TO hoge@"192.168.1.199" IDENTIFIED BY 'passward2' WITH GRANT OPTION;

という2つのSQL文を発行しました。エラーなく正常終了します。 そして接続しようと試みたところ、コネクションエラーが発生。。。

うーーん、なぜ接続できないのだろうかと悩み、ユーザ情報を確認してみると

select user, host,password from mysql.user;

+------+---------------+----------+
| user | host          |password  |
+------+---------------+----------+
| hoge | %             |passward1 |
| hoge | 192.168.1.199 |passward2 |
+------+---------------+----------+

あれ!?パスワードが微妙に違う。。。(汗)

もうおわかりですね。 hoge/passward2で接続を試みた結果がコネクションエラーでした。。 hoge/passward1で接続するかキチンと意図した権限を付与しなおすと正常接続できました。

ググってコピペで実行。。。よくやってしまう行為ですが 開発環境とはいえ、意味を理解して実行しないといけないなと反省しました。というお話です。