WordPress日記

WORDPRESSでレスポンシブする場合に注意!

現在、WORDPRESSには沢山のレスポンシブテーマが用意されており、これを使うと簡単にレスポンシブル対応ができてしまいます。しかしオリジナルで追加したコンテンツが簡単に変換されてレスポンシブ表示になるかと言えばそんなことはありません。

一番問題になりそうなところを言ってしまうと、テーブルタグ、divタグの入れ子にした時が最も崩れてしまう可能性があります。

レスポンシブは手法を大きく分けると3種類存在します。

  1. 従来の技術リキッドレイアウト(CSSのautoやHTMLの%表示指定などをフル活用)
  2.  

  3. Javascriptやプログラム側でUSER_AGENTからブラウザ判定しstyle.cssを切り替える
  4. JQuery等のJavascript系のライブラリーを使用する

で、実際3番を最初やってみましたよ。

ところが問題がありました。
JQueryのライブラリーは当然WORDPRESSを入れると最初から自動で入っていますし、テーマがレスポンシブル対応であれば尚更、補足するライブラリーが沢山詰まっているわけですよ。

結局コンタクトフォーム、テーブル表示、DIVタグ入れ子の箇所はレスポンシブダメダメでとほほだったのでJQueryやその他のJavascriptライブラリーを入れてみたが、どうやら干渉してしまい、まともに動きません。

大体の予測はありました。AjaxライブラリーをWORDPRESSに導入した場合も、プログラムの”$”の箇所を”JQuery”に書き換えて対応したので、おそらく其の関連であろうと思います。しかし書き換えるのも面倒なのでJavascriptさよならしました。
一般的にはWORDPRESSの最初から同梱しているものを外して、オリジナルのJQueryを入れると動作するものと思われます。

んで、原点に戻りリキッドレイアウトを利用し結局作らわざるを得なかった。
成功例があれば、こっちの方はそれほど難しくないということがわかった。IEでうまく表示できない場合はリキッドレイアウトの方がそもそも対応しやすいと思う。また2番めの手法も合わせて利用すると完璧かもしれない。

WordPressセキュア&SPAM制限TIPS

最近、様々なプロバイダーでCMSを使ったコンテンツが侵略され改竄される被害にあっています。全て同じ手法で攻撃されているわけではありませんが、必要十分なセキュリティについて掲載して行きたいと思います。

一番、ガンブラー系攻撃でブロックする有効な手法はIPアドレスのフィルタリングではないでしょうか?
自宅のアクセスライン、会社のアクセスラインに固定IPのインターネットサービスを使う必要があります。固定IPのアクセスラインは安いところもありますのでそれを活用すると良いと思います。

もしどうしても、固定IPがとれないならProxyServerを格安VPS上で動作させてあげれば、VPSの固定IPを使ってブラウザーアクセスすればIPの固定化ができます。私の会社の顧客の一部もそうしています。日本には昔からよく知られたProxyServerでDelegateというオープンソースサーバがあります。これを使ってブラウザーのProxyServer設定を組み込んで自社のHPへアクセスする際に制限をかければ問題ありません。

http://www.delegate.org/delegate/

話は戻って実際にIPアドレスでの制限をかける設定ですが以下の記述をApache Web Serverにかけてあげれば安全です。
記述する箇所はhttpd.confやvirtual.conf等のディレクティブとディレクティブで利用してください。又.htaccessにも記述しても動作いたします

アクセス制限サンプル

order deny,allow
allow from a.b.c.d # ここに許可するアクセスIPを記述。
deny from all

ホットリンクを制限します

ホットリンクとは自分のコンテンツを勝手に他サイトで利用されることを意味します。いい意味でリンクされるなら視聴の営業活動になるのですがSEO上、アクセス負荷上の問題となることもあるので制限をかけたい人はいるはず
下記は画像を勝手にリンクされてしまうのを防ぐ例です。ページ全体のリンクも下記応用でフィルタリング可能です
手法はアクセス前のリファラーを見て自サイト経由からのアクセス以外は自動で警告(warn_stolen_image.jpg)イメージに転送する記述です。apacheのhttpd.conf.virtual.confや.htaccessに記述してください。

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ http://exampe.com/warn_stolen_image.jpg [R,L]

コメントスパムをブロックします

ブログコメントにスパムをする輩って多いですよね。これをブロックするためにリファラーを監視します。
リファラーはどのページから該当ページを見に来たのか、一つ前にいたページをチェックする機能です。
スパムのプログラムはダイレクトにコメントプログラムへアクセスするため基本Noリファラーになります。
ノーリファラーできたものは自身へ転送します。つまりエラーになります。apacheのhttpd.conf.virtual.confや.htaccessに記述してください。

RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*example.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

wp-config.phpをアクセス禁止

アクセス制限サンプルと同じ要領で行なってください。apacheのhttpd.conf.virtual.confや.htaccessに記述してください。

<Files wp-config.php>
order allow,deny
deny from all
</Files>

.htaccessのアクセス禁止

apacheのhttpd.conf.virtual.confや.htaccessに記述してください。

<Files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</Files>

.htaccessのファイル名を変更して攻撃者からapacheコンフィグを探せなくする

.htaccessファイル自体の名前は知られているので別のファイルの名前にすると安全です。apacheのhttpd.conf.virtual.confに記述してください。
次からはht.access.ruleが.htaccessの代わりとして動作します。

AccessFileName ht.access.rule

以上ですが、是非トライしてみてください。

WORDPRESSの記事本文でJavaScriptを書く

WORDPRESSの記事本文でJavaScriptを書きたいことってありませんか、例えばAjaxで直接裏側でHTTPを叩いて得たデータを展開するなどあると思います。

WORDPRESSで実際記事本文にJavaScriptを書くと無視されてしまうのをご存知でしょうか?

そこで登場するのが、inline-js —— wordpress plugin
これを使えば固定ページや記事にもJavascriptが書けます。

jQueryやAjaxしたい人には便利ですね。書き方は以下のように書きます。

[inline]
<script type="text/javascript">
document.write("hello world!");
</script>
[/inline]

ちなみにjQueryは、”$”と書かれているところをjQueryという文字で置き換えないとWORDPRESSで動作しないので要注意です。

WP/MT の高速化

WordPressやMovableTypeを使っていて遅いと感じること多いですよね。

こんな時に便利なのがキャッシュプラグインなのですが、キャッシュにはメモリのキャッシュとファイルのキャッシュがあります。
WordPressでは色々なキャッシュプラグインがありますが、基本ファイルキャッシュのプラグインが多いです。WPやMT混在で存在するなら

メモリー上で動作するキャッシュが早くてよいと思います。

有名なところでmemcachedが国内でも非常によく使われています。

まず最初にWPのケース

キャッシュサーバ導入
# yum install –enablerepo=rpmforge memcached <----rpmforgeのレポジトリが必要。 PHPキャッシュモジュール導入 # pecl install memcache PHPにモジュール組み込む # vi /etc/php.d/memchached.ini ; for memcache extension=memcache.so # service httpd restart # service memcached start 今度はWPの管理コンソールに入り、プラグインを新規追加から「Memcached Object Cache」をインストール。 ただしインストールした後に、pulguin/memcachedフォルダーからwp-content直下に object-cache.phpファイルを移動させてください。 これをしないと動作しません。 これでWPにmemcachedが設置されました。サイトが真っ白になるようであればWEBサーバを再度起動させてください。もしくはmemcacheモジュールが phpにうまく設置できていない可能性があります。

MTのケース

yumでmemcachedサーバをインストールするのはWPと全く同じです。

# cpan -i Cache::Memcached

# vi mt-config.cgi  <---最下部に以下を追加記述 MemcachedServers 127.0.0.1:11211 # service httpd restart <---本来CGIなので再起動いらないと思うが念のため。 # service memcached restart 以上で完了。サイトにアクセスするとキャッシュが効いています。 一通リのページに自分でアクセスしキャッシュを適用させておきましょう。

WordPressのメール送信フォーム Contact Form7のカスタマイズ

WordPressのメール送信フォームのカスタマイズで有名なContact Form7は有名ですが、このカスタマイズにはしばらく手を出していなかった。

今回必要となる要件としてWordPressのユーザ(WPをつまり会員サイト用につくる)した時にメール送信フォームを
用意する場合、どうやってユーザ名とメールアドレスを自動で入れるかが課題だった。既に会員登録しているから入力させるのは
重複なわけだ。

検索したところ、ようやくContact Form7でそれがサポートされていることがわかった。
このサイトが役に立ちました。


ログインフォームの自動化(本家サイト)

ちなみに、下記も一緒に読むとベスト
[WordPress] ユーザー情報を取得する
特別なメールタグ