NP Log

タグ: WordPress

  • WordPressのレスポンス改善

    最近、自社サイトで各種プラグインやテーマを試しているうちに、次第にレスポンスが悪くなっていると感じたのであらためて高速化について調べてその対策をしてみました。

    これまでは定番のプラグイン “WP Super Cache” を使っておけば良いと思っていたのですが、バージョンアップを重ねて高機能化するのは良いものの設定項目が多くて管理に手間取ったり、他のプラグインとの相性の問題があったり。ということで高速化について調べてみると他にも高速化の要素があることに気がつきました。

    今回、主に参考にさせていただいたサイト。

    それと上記サイトでも一部紹介されているレスポンスを確認するためのツール

    で、今回新たに組み込んだプラグインは次の3個です。

    • WP-Optimize
      投稿記事の複数リビジョンや下書き、スパムコメントなどの削除と
      DBの最適化を手動で行うことができます。
    • MO Cache
      翻訳ファイル(.mo)のキャッシュ
    • WP File Cache
      上記キャッシュを複数のアクセスに対応させる

    そしてツールで測定した結果、タイミングとか時間帯によってばらつきがありますが、読み込みの時間が以前の約60%に改善されました。
    ブラウザで直接開いてみると、以前はしばらく待たされる感じがあったのですが、対策後はそれほど待たされる感じもなくすっと表示されます。ブラウザのキャッシュやネットワークの状態などいろいろな要素が絡みますので一概に良くなると言い切れない部分もありますが、WordPressのレスポンスが悪いと感じられる場合は、試してみてはいかがでしょうか。

  • お問い合わせフォーム – WordPress

    お問い合わせフォームに日付や時刻の項目を追加しようと思って調べてみたら “Fast Secure Contact Form” というプラグインが見つかりました。お問い合わせフォームといえば、”Contact Form 7″ が定番になっていますが、こちらのプラグインも機能が充実していてよさそうです。

    Fast Secure Contact Form
    Fast Secure Contact Form（スクリーンショット）

    公式サイトはすべて英語になっていますが、日本語に対応しており設定画面はほぼ日本語で表示されますので無理なく使えると思います。

    まずダッシュボードの「プラグイン」から「FS Contact Form Options」を開きます。

    デフォルトで4種類のフォームが作れるようになっています。
    フォームを設置する場合はこの設定画面の上のほうにある、
    [si-contact-form form=’1’]
    というコードを本文中に貼り付けるだけです。
    また、「プレビュー」をクリックすると、その場でフォームが確認できます。

    ひとまず基本項目はそのままで各種オプションも初期値のままにしておいて、
    追加項目「Extra Field 1」に日付を追加してみます。

    各項目を編集したら、随時「更新」ボタンで保存しておきます。
    同様にして「Extra Field 2」に時刻を追加します。

    その他、必要に応じて各種オプションを編集します。

    サンプルで作ってみたフォームはこんな感じです。

    それよりも、このプラグインとvCitaというサービスとの連携が気になります。

    http://www.vcita.com/

    このフォームからのお問い合わせをカレンダーに連携させることで、スケジュール管理ができます。
    また、ビデオまたは音声によるオンラインミーティングの予約にもなって
    ビデオミーティング用のアプリも提供していて、
    顧客管理ができて、
    有料サービスのための決済もできます。とか。
    ※FAQを読んでみると、ビデオミーティングは Adobe Flash が必要とのこと。w

    英語ですがプロモーションビデオがありますので参考まで。
    Welcome to vCita

  • WP Super Cache の WPTouch 対応について – WordPress

    WordPressのキャッシュの状況を確認しようと思い、ダッシュボードからWP Super Cacheの設定を開いてみたところ、なにやら警告表示がありました。

    どうやら WP Super Cache が WPTouch を見つけている様子です。
    そこで、WP Super Cacheの設定画面からプラグインを開いてみると、
    WPTouchの設定（有効／無効）が見つかりました。

    ということで、早速この設定を有効にしておきました。
    ちなみに、WP Super Cacheをモバイル端末でも有効にするには詳細設定で
    Mobile Device Supportをチェックしておきます。

    参考までに WP Super Cache へのリンクを貼っておきます。

  • 引き続き WordPress のテーマ

    比較的シンプルなテーマを2点ほど取り上げて
    ざっとHTML5の対応について調べてみました。

    • Suffusion
      http://wordpress.org/extend/themes/suffusion
    • Fiver
      http://wordpress.org/extend/themes/fiver

    Suffusionの場合、トップページにはsectionタグが見つからなかったのですが、
    コンテンツの詳細ページで使われていました。

  • PageLines – WordPressのテーマ

    先日、CSS Niteというセミナーに参加しました。
    http://cssnite-matsuyama.com/vol01/
    http://cssnite.jp/
    HTML5とCSS3を中心に、各講師の方それぞれの切り口で
    貴重なお話を聴かせていただきました。

    せっかく勉強したので何か実践してみようと思い、
    WordPressのテーマを HTML5 というキーワードで検索。
    #実践という割には、やる気が感じられないですね。(汗

    まぁともかく、PageLinesというテーマを見つけてインストール。
    最近のテーマは各種SNSへの対応はもちろんのこと、
    ダッシュボードの設定画面がとても充実しています。

    以下、1点気になったので、メモ書き。
    フッターに Twitter Bar があって、
    アカウントを設定すると最近のツイートが表示されるとか。
    ですが、どうもうまく動作せず。

    そこで、非表示にしようと思ったのですが、
    設定の場所がすぐには見つからず。
    ということでスクリーンショットを貼っておきます。

  • Facebookへの連携 – Add Link to Facebook

    http://wordpress.org/extend/plugins/add-link-to-facebook/
    しばらく、Wordbookerを使っていましたが、
    WordPressのダッシュボードで、この “Add Link to Facebook” の人気が高そうだったので、
    試しに切り替えてみました。

  • 画像をリンクにする – WordPress

    WordPressのページ編集において、画像を追加してそれを他のページへのリンクにしたい場合。

    新規に画像を設置して他のページへのリンクにする場合

    • 「アップロード/挿入」をクリックして画像をアップロード
    • リンクURLを編集して「投稿に挿入」をクリック。
    • プレビューで確認して保存（完了）

    設置済みの画像を他のページへのリンクにする場合

    • 編集画面でイメージタグを選択して「link」をクリック
    • URLを入力し、タイトルなど適宜編集して「Add Link」をクリック
    • プレビューで確認して保存（完了）

  • WordPressのダッシュボードで文字化け

    先週あたりから、WordPressのダッシュボードで作業をしているとメニューやコンテンツの一部が文字化けするようになりました。ちょうどWordPressが3.3にアップデートされたこともあってそれが原因かと思っていたのですが、どうやらChrome（ブラウザ）とWindowsXPのフォントの組み合わせによる問題だったようです。

    まず、Chromeで文字化けが起きたときに確認すべきこと。
    「設定」->「ツール」->「エンコード」

    エンコードが「自動検出」、「UTF-8」となっていること。
※ご利用の状況によってはエンコードの種類が異なるかもしれません。
エンコード

    「設定」->「オプション」->「高度な設定」->「フォントをカスタマイズ」

    
※この設定で文字化けが解消できるということではありませんので、念のため。
※エンコードを「日本語(Shift_JIS)」にすると改善されるという記事もあります。

    chromeのみの文字化けについて(Googleグループ)
    例えば、あるウェブページのcssでfont-familyに英語のフォントが指定されていると、WindowsXPのバグによって日本語フォントへの置き換えができず文字化けしてしまうようです。
    確かに、過去にAdobe製品他をインストールしたことがあっていろいろなフォントが入っていました。
    そして、WordPressのダッシュボードには、たとえば次のようなcssが設定されています。

    body :not(textarea) {
font-style: normal !important;
font-family: Arial, "Bitstream Vera Sans", Helvetica, Verdana, sans-serif !important;
}

    そこで、Chromeのデバッグ機能によってcssを調べてみました。

    ※文字化けしている部分をマウス右クリックで「要素を検証」
要素を検証

    すると画面右下にスタイルが表示されますので、その中から font-family を指定している部分を見つけてフォント名のところをダブルクリックして編集できる状態にします。

    elements-styles
この状態で、フォント名を一つずつ削除していって文字化けが解消されたら
そのときに削除したフォントが原因となっている可能性があります。

    問題のフォントが特定できたら、C:\WINDOWS\FONTS フォルダを開いて削除（念のため他のフォルダへ移動）します。このとき、フォントキャッシュによって問題が改善されない場合がありますので、WindowsをSafeモードで起動してフォントキャッシュ(fntcache.dat)を削除します。
    ※Safeモードでfntcache.datをファイル検索でさがして削除して再起動。

    wp-multibyte-patchプラグイン

    プラグインが設置されているフォルダ内にサンプルの設定ファイル(wpmp-config-sample.php)がありますので、それをコピーして /wp-content/wpmp-config.php ←ここに保存します。その際に、次の行を編集します。

    $wpmp_conf['patch_admin_custom_css'] = true;
//管理パネルの独自外部 CSS 読込み機能の有効化 (true) 、無効化 (false)
これを false にしてみる。

  • PHPEnkoder – WordPressプラグイン

    PHPEnkoder

    コンテンツにメールアドレスを書くと、自動的にmailtoのリンクに
    変換してくれます。しかも、HTMLソース内のメールアドレスが
    エンコードされますので、スパム対策にもなります。

  • TwentyEleven – ヘッダー画像サイズのカスタマイズ

    今回は、ヘッダ画像の高さのみカスタマイズしてみます。
    デフォルト値 288px を 200px にする場合。
    ※TwentyElevenの子テーマが用意されていることを前提としています。

    修正ファイルは次の２つ

    • style.css
    • fuctions.php

    style.css の修正箇所

    section.feature-image.large {
border: none;
max-height: 200px; /*288px;*/
padding: 0;
width: 100%;
}

    functions.phpの修正箇所

    function twentyeleven_setup() {
/* (省略) */
require( dirname( __FILE__ ) . '/../twentyeleven/inc/theme-options.php' );
require( dirname( __FILE__ ) . '/../twentyeleven/inc/widgets.php' );
/* (省略) */
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 200 ) );
/* (省略) */
}

    require()の行は、子テーマから参照する場合の親テーマのパスに合わせます。