WordPress

WP Super Cache

WordPress WP Super Cacheプラグインを入れてみた。

WordPress WP Super Cache(0.9.9.8)プラグインをインストール。
WP Super Cacheとは、キャッシュを利用してWordPressの表示を高速化するプラグイン。

動的なWordPressのブログから静的なHTMLファイルを生成し、
そのHTMLファイルを提供することで、表示を高速化してくれるというもの。

手順はこんな感じ。

1. プラグイン管理画面で WP Super Cache を有効化する。

2. エラーのように赤く表示され WP Super Cache の設定画面に行くよう促される。

3. WP Super Cache の設定画面 Easyタブで 「Caching On(Recommended)」 を選択し、
「ステータスを更新」をクリック。

4. 「警告!・・・・・/wp-content が書き込み可能になっています!」 と表示されたら、
wp-content のパーミッションを 「755」 に変更。
※警告を無視しても大丈夫みたいです。

5. WP Super Cache 管理画面 詳細タブ Mod_Rewriteルール で「Mod_Rewrite ルールを更新」をクリック。

6. 「Mod Rewrite ルールを更新しました ! .htaccess が必要な mod_rewrite ルールで更新されました。
正しく更新されたか確認してください。次のようになっているはずです。」
と表示されたら、「Mod_Rewrite ルールを参照する」をクリック。 同じように書き込まれていたら設定完了。

7. wp-content/cacheに”wp-cache-XXXXXXXXXXXXXXXXX.html”が作られればOK。

未だ投稿数があまり多くないから、恩恵を受ける部分は少ないかも。

Google Maps Anywhere_before

WordPress Google Maps Anywhereプラグインで、携帯表示のサイズを指定する方法

WordPressプラグインGoogle Maps Anywhereで、携帯表示のサイズ指定をする方法について。

Google Maps AnywhereはWordPress管理画面の
「設定」→「Google Maps Anywhere」→「オプション」で、デフォルトの地図サイズが指定可能になっていますが、

携帯サイトでは、”横幅:128px、縦幅80px”がデフォルトサイズとなっています。
(※ちなみに、プラグインKtai Styleを使用しています。)
Google Maps Anywhere_before

携帯サイトの地図表示サイズを指定するには、wp-config.phpの86行目に以下のdefineを追加。

define(‘GM_ANYWHERE_MOBILE_WIDTH’, 320);
define(‘GM_ANYWHERE_MOBILE_HEIGHT’, 240);

こうすると、”横幅:320px、縦幅240px”で携帯サイトにGoogle Mapを表示することが可能です。
Google Maps Anywhere_after

図A

テーマMystique(2.4.2)デザイン調整

当方はWordPressを使用しておりまして、テーマは、Mystique(ver2.4.2)を使用しております。デザイン素人ですが、少しスタイルシートをいじったので覚書き。

1.英語テキストがすべて大文字になってしまう件。

style.css内のtext-transformプロパティをすべて修正。

デフォルトは、text-transform:uppercase
修正後は、text-transform:none

※ちなみに、値は以下の通り。

none→記述した通りに表示。初期値はコレ。
capitalize→単語の先頭文字を大文字で表示。
lowercase→全てを小文字で表示。
uppercase→全てを大文字で表示。

2.エキストラナビゲーションのアイコンが見難い件。

Mystiqueは、デフォルトでヘッダーにRSSとtwitterのエキストラナビゲーションアイコンがあり、マウスオーバー時(図A)に、もう少し上までひょっこりしないと見難いと感じたので、style.cssを以下のように修正。
Mystique
図A

[102行目]追加
#header p.nav-extra{height:54px;top:-46px}

[103行目]変更
修正前 #header a.nav-extra{width:64px;height:36px;display:block;float:right;margin-left:6px;}
修正後 #header a.nav-extra{width:64px;height:60px;display:block;float:right;margin-left:6px;}

これでマウスオーバー時のアイコンが多少見やすくなるかと思います。