Wordpress テーマ変更後に行ったこと。 フォント調整・動画表示幅調整・記事抜粋の長さ調整

WordPress テーマ変更後に行ったこと。 フォント調整・動画表示幅調整・記事抜粋の長さ調整

WordPress テーマ変更後に行ったこと。 フォント調整・動画表示幅調整・記事抜粋の長さ調整

2014年2月23日 No Comments on WordPress テーマ変更後に行ったこと。 フォント調整・動画表示幅調整・記事抜粋の長さ調整

WordPressのテーマを入れ替えてから、あれこれ調整しましたので、メモとして記載しておきます。

変更点は以下の3つ

外国物のテーマを導入した時にはフォントが思うように表示されない

動画 videoタグの表示幅がめちゃくちゃになる

記事抜粋の長さを調整したい

ファイル名：functions.php

以下を追加

[diff]
+// Videoの幅を調整
+if ( ! isset( $content_width ) ){
+ $content_width = 620;
+}
+
+// 記事抜粋文字数の調整
+function new_excerpt_length($length) {
+ return 200;
+}
+add_filter(‘excerpt_length’, ‘new_excerpt_length’);
+add_filter(‘excerpt_mblength’, ‘new_excerpt_length’);

[/diff]

ファイル名：style.css

[diff]
body {
– color: #888;
– font-family: ‘Open Sans’, sans-serif;
– font-size: 12px;
+ color: #444444;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans- + font-size: 16px;
+ font-size: 16px;
}

h1 {
color: #fff;
– font: 400 32px/34px ‘Rokkitt’, serif;
+ font: 400 32px/34px ;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
letter-spacing: 0;
margin-bottom:5px;
}
h2 {
color: #fff;
– font: 400 28px/30px ‘Rokkitt’, serif;
+ font: 400 28px/30px ;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
letter-spacing: 0;
margin-bottom:5px;
}
h3 {
color: #fff;
font: 400 24px/26px ‘Rokkitt’, serif;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
+
letter-spacing: 0;
margin-bottom:5px;
}
h4 {
color: #fff;
– font: 400 20px/22px ‘Rokkitt’, serif;
+ font: 400 20px/22px ;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
+
letter-spacing: 0;
+ margin-top:10px;
margin-bottom:5px;
}
h5 {
color: #fff;
– font: 400 16px/20px ‘Rokkitt’, serif;
+ font: 400 16px/20px ;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
+
letter-spacing: 0;
margin-bottom:5px;
}
h6 {
color: #fff;
– font: 400 14px/20px ‘Rokkitt’, serif;
+ font: 400 14px/20px ;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
letter-spacing: 0;
margin-bottom:5px;
}

.kopa-article-list .entry-item .entry-title {
– font-size:20px;
– font-family: ‘Raleway’, sans-serif;
+ font-size:24px;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
border-bottom:1px solid #ececec;
padding-bottom:15px;
margin:0 0 15px;

.kopa-article-list .entry-item .entry-date,
.kopa-article-list .entry-item .entry-comments {
color:#888;
– font-family: ‘Raleway’, sans-serif;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans- margin-right:15px;
}

.entry-box .entry-title {
– font-family: ‘Raleway’, sans-serif;
– color:#333;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif; padding-bottom:10px;
+ color:#666;
border-bottom:1px solid #ececec;
– padding-bottom:10px;
position:relative;
margin:0 0 15px;
}

.entry-box header .entry-date,
.entry-box header .entry-comments {
color: #888888;
– font-family: ‘Raleway’,sans-serif;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif; padding-bottom:10px;
margin-right: 15px;
}

.entry-box footer p a.article-title {
font-size:20px;
– font-family: ‘Raleway’,sans-serif;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif; padding-bottom:10px;
}
.entry-box footer p .entry-date {
color:#888;
– font-family: ‘Raleway’,sans-serif;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif; padding-bottom:10px;
}

[/diff]

以上です。良かったら参考にしてみてください。

About the author:

Tags:

Related Posts

  • WordPressのプラグイン作成、申請過程で感じたこと（雑感編）
    2014年4月1日

    １週間ほど前に、急にWordpressのプラグインが作りたくなって、２日間ほど気合を入れて実装した。現在、Wordpress.orgへ申請して、チェック段階にあるのだが、現時点で感じたことをまとめておこうと思う。これは雑感編で、プラグイン作成手順をちゃんと知りたい方は一つ前の投稿を参照ください。 今回は以下の部分のうち、申請後、担当者と英語でやりとりする部分からスタートです。 プラグイン作成のお作法を調べるのに少々時間がかかる ソースの実装自体は、ただのPHPなのでそれほど難しくはない 多言語対応するための情報収集＆実装 にはちょっと時間が必要 申請のために必要なWordpress プラグイン書式に則ったReadme.txtを作るのがだるい WordPress.orgのユーザー登録をする プラグインの申請を出す。 申請後、担当者（Wordpress.orgの中の人（外人））と英語でやりとりするのは、意外にためなる 申請通過 現時点での雑感 申請後、担当者（Wordpress.orgの中の人（外人））と英語でやりとりするのは、意外にためなる 現在この時点なのですが、外人さんとメールでやりとりすると、度胸もつくし、英語慣れも出来ていいかもしれません。審査担当者もプログラマーなので、適当英語でもなんとなく意思疎通できますｗ。若干、上から目線な気がして気にはなりますが、めげずに頑張りましょう（ってか、私の申請も通過するかどうか分からんのですがね・・・） 申請通過 申請通過したら、追記します。 現時点での雑感 プラグイン作成になれるまでに半日強はかかってしまいますが、それさえクリアすれば、実装はただのPHPなので簡単です。多言語対応のためにデフォルトは英語で実装しなきゃならないので（そう決まっているわけではないが・・）、英語のフレーズが思いつかない場合とかは悩んじゃいますね。多言語対応の作業自体は、英語部分を日本語に置き換えるだけなので、日本語に困るはずもないので、かなり簡単である。多言語対応のためのpoEditさん、ありがとう。Readme.txtを作るのが非常に面倒だ。慣れない英語で自己主張しなきゃならないので、かなり面倒です。 申請後、１日から数日以内に審査担当者からメールが届く。 初期段階は表づらをおったチェックが入る。私の場合は jqueryをプラグイン管理画面で利用しているが、Wordpress側で自動で読み込まれているような気がしたので、includeする処理を省いていたら、 すっげー長い前置きをつけた後で、 jquery使うんなら、うちの作法に則って、JSを読み込んでくれ！って文句を言われた。 次の段階はこんな感じ。 これはプラグインの仕様によるので、様々であるが、プラグイン外でHTMLページを表示し、そこからキャッシュを再構築する機能をつけたんだが、そのページ内でGoogleさんがホストしているjqueryを読み込みに行くロジックを書いていたら、 「こらっ！ WordPressと互換性がなくなるかもしれないもん、読み込むんじゃねーよ！」とツッコミが入る。 で、以下のような返信をした。 （暗に、あんたソースちゃんとチェックしてねーだろーという意味も込めて） そのファイル自体は WordPressからも PHPからも管理外の ただのHTMLファイル＋JSなんですよ。だから、互換性がホニャララとか突っ込まれる筋合いはございません。 カチンと来たのか、次のような返信が舞い戻ってきた（笑） なんだと、ただのHTMLファイルだと？ そんなもん作ったら、誰からもアクセスできちゃってアブねーじゃねぇーか。 で、こんな返信をした。 キャッシュのクリア自体はプラグインの管理画面からしか出来ないのよ。キャッシュ再構築ページはただのHTMLだけど、既にキャッシュがある場合はほとんど機能しないに等しいから、いいんじゃねぇの？ （ここは書いてない・・・ でも、あんまりあんたがうるさいから） HTMLファイル名をランダム生成するような実装を追加したよ。 まだ我慢がならないようで、次のような返信が舞い戻ってきた（笑） なんでただのHTMLなんだよ、あんたも知ってるかも知んないけど、キャッシュ系のプラグインはプラグインの管理画面からログインをチェックして、キャッシュ再構築する機能があるんだぜ！ ここで 気に入ったというか、へぇ　ーこんなフレーズあるんだと思った部分。 every other cache plugin under the sun 僕の理解が間違っていなければ、「既に公開されてるキャッシュ系のプラグインはみんな・・・」 で、仕方ないので以下のような返信をした。 スタティックHTMLはやめたよ。PHPファイルに変えて、シンプルな認証機能をつけたよ。こんでいいか？ いまここ・・・（2014/03/31 PM 4:00） 宣伝 これが申請中のプラグインです。ぜひ一度お試しください！ WordPressのパフォーマンスを10倍から1,000倍 速くできるかもなプラグインを作った 〜 Text Cache Controller plugin

  • WordPressのプラグイン作成（作成手順編）
    2014年3月31日

    １週間ほど前に、急にWordpressのプラグインが作りたくなって、２日間ほど気合を入れて実装した。作成手順編では、プラグイン作成の初歩から、Wordpress.orgへの申請までの手順を説明する。 プラグイン作成のお作法を調べるのに少々時間がかかる ソースの実装自体は、ただのPHPなのでそれほど難しくはない 多言語対応するための情報収集＆実装 にはちょっと時間が必要 申請のために必要なWordpress プラグイン書式に則ったReadme.txtを作るのがだるい WordPress.orgのユーザー登録をする プラグインの申請を出す。 申請後、担当者（Wordpress.orgの中の人（外人））と英語でやりとりするのは、意外にためなる 申請通過 現時点での雑感 これらを順を追って大雑把にまとめておく。 プラグイン作成のお作法を調べるのに少々時間がかかる プラグインがどういう仕組みで動いているか、普通の人は知るはずもないので、これを調べなきゃなりません。ぐぐってみましたが、素晴らしくピンポイントで情報を提供してくれているようなサイトはなく、いくつかのサイトの情報を閲覧する。加えて、既に公開されている簡単そうなプラグインのソースを追っかけてみる。で、なんとか理解できたという感じです。 詳細に書くのはちょっと面倒なので、ざっくりとだけ手順を記載しておきます。 プラグインの名前を決める 私が公開予定のプラグイン名が text-cache-controller なので、その過程で話を進めます。 プラグインの設定画面を作る WordPressのルートフォルダ/wp-content/plugins/　フォルダ内に プラグイン名でフォルダを作り、その中に プラグイン名.php (text-cache-controller.php)　を作る。 プラグイン設定画面のCSSを作る プラグイン名.css (text-cache-controller.css)　を作る。 プラグイン名.php内にクラスを定義し、必須となるfunctionを定義 ◇クラス名には特に決まりはないと思います。 ◇クラスのコンストラクタで、Wordpressのダッシュボードの左側に表示されるメニューに追加するためのfunctionを定義する。 ◇add_actionというのはWP側で定義されている関数みたいなので、こいつを第一引数 “admin_menu” で呼び出して、第二引数に配列で、$thisとメニュー定義の詳細を決定するfunctionを渡してやる。 ◇指定したfunction内に これまたWP側で定義された add_submenu_pageを呼び出してやる。 第一引数の “options-general.php”　は メニューのどの位置に自分のプラグインの設定リンクを追加するかという定義で、後ろから２つ目の配列引数で、$thisと自分のプラグインの設定画面のHTMLを描画するためのfunctionを設定してやる。 [php] class TextCacheControllerAdmin { function __construct() { add_action(“admin_menu”, array($this, “add_pages”)); } function add_pages() { add_submenu_page(“options-general.php”,”Text Cache Controller Settings” ,”Text Cache Controller”, “level_8″, __FILE__, array($this,”showOptions”), “”, 26); } function showOptions() { ここに、ガリガリと自分のプラグインの設定画面のHTML出力を記述します。 } } $tccadmin = new TextCacheControllerAdmin(); [/php] プラグインが利用するCSSとJSを読み込むための定義を追加 これは、上記のクラス外に以下のような感じで、追加してあげればOKです。 ここでも　WP側で用意されている function add_acctionを利用します。 CSSを読み込むためのfunctionとJSを読み込むためのfunctionを用意し、add_acctionの引数に与えればOK。 add_action(‘admin_enqueue_scripts’, ‘適当なfunction名’); [php] function tcc_styles() { wp_register_style( ‘custom_wp_admin_css’, plugins_url(‘text-cache-controller/text-cache-controller.css’)); wp_enqueue_style( ‘custom_wp_admin_css’ ); } add_action(‘admin_enqueue_scripts’, ‘tcc_styles’); function tcc_scripts() { wp_enqueue_script( ‘jquery’ ); } add_action(‘wp_enqueue_scripts’,’tcc_scripts’); [/php] プラグイン設定画面 出力用functionをひたすら実装 自分のプラグインの設定画面に必要なHTMLをひたすら実装します。 このfunction内で、設定値を表示する処理、設定値を保存する処理、その他もろもろの処理をごちゃごちゃ書いていけばOKです。 何点かポイント ・自分のプラグインの設定画面が呼ばれているのかどうか判定 [php] wp_nonce_field(“tcc_options”);　 と if ( isset($_POST[“tcc_options”])) { check_admin_referer(“tcc_options”); [/php] を埋めておけば　OKです。 「tcc_options」という部分はご自身で好きなように決めればOKです。 [php] <?php function showOptions() { if ( isset($_POST[“tcc_options”])) { check_admin_referer(“tcc_options”); ?> <?php wp_nonce_field(“tcc_options”); //WordpressのDBから設定値を取得したい場合 $opt_isdebug = get_option(“tcc_isdebug”); //WordpressのDBへ設定値を保存したい場合 update_option(“tcc_isdebug”, $isdebug); ?> xxxxx yyyyy zzzz <?php } ?> [/php] WordPressの情報を取得するには MysqlのWordpressのDB内の「wp_options」テーブルにWordpressの設定値は入っています。 この中の値を見て、自分が欲しい情報はどれかなと適当に考えてください。 例）サイトのURL取得 [php] $url = get_option(“siteurl”); [/php] 投稿(Post)一覧を取得 [php] $args = array( ‘numberposts’ => 20, ‘offset’ => 0); $recent_posts = wp_get_recent_posts($args); foreach($recent_posts as $post){ echo $post[“ID”]; echo get_permalink($post[“ID”]) ; echo $post[“post_title”] ; } [/php] カテゴリー一覧を取得 [php] $categories = get_categories( ‘get=all’ ); foreach($categories as $cat){ echo $cat->term_id ; echo $cat->name ; echo get_category_link( $cat->term_id ); } [/php] Tag一覧を取得 [php] $tags = get_tags( ‘get=all’ ); foreach($tags as $tag){ echo $tag->term_id ; echo $tag->name ; echo get_tag_link( $tag->term_id ); } [/php] ソースの実装自体は、ただのPHPなのでそれほど難しくはない プラグインのお作法さえぼんやりわかれば、あとはただのPHPですので、特に深く考える必要はありません。自分の好きなように書きゃいいと思います。 多言語対応するための情報収集＆実装 にはちょっと時間が必要 基本は英語版で作成し、phpソース内に埋め込んだ 英語のリテラル部分を実行時に他の言語ファイルに定義された内容に置き換えるということになります。 多言語対応のためのソース調整 例えば phpソース内に以下のようなソースがあり、これを多言語化する場合は [php] <?php echo “This is a pen”; ?> [/php] 以下のように書き換える。 [php] <?php _e(“This is a pen”, self::DOMAIN); ?> [/php] で、self::DOMAIN という定数は定義されていないので、クラスに定義し、コンストラクタを、以下のような感じで調整してやる。 [php] class TextCacheControllerAdmin { const DOMAIN = “text-cache-controller”; function __construct() { load_plugin_textdomain(self::DOMAIN, false, basename( dirname( __FILE__ ) ).’/languages’ ); add_action(“admin_menu”, array($this, “add_pages”)); } [/php] 言語ファイル作成 プラグインフォルダ内に languages というフォルダを作り、プラグイン名-ja.poファイルを作成。 テキストエディタでファイルを開き、その中に以下のような定型文を埋め込む。 [diff] # Copyright (C) 2014 WordPress # This…

  • WordPressのパフォーマンスを10倍から1,000倍 速く（高速化）できるかもなプラグインを作った 〜 Text Cache Controller plugin
    2014年3月28日

    はじめに WordPressを１０倍から１０００倍 速くできるかもしれないプラグインを作ったので紹介します！普通１０００倍とか聞くと「うそだろーー！」とツッコミを入れられてもしかたないのですが、実際に、そのぐらい、もしくはそれ以上の結果が出ているので、あながち嘘でもないと思います。信じられない人は、騙されたと思って、一度インストールしてみてください。インストール・アンインストールともに、めちゃくちゃ簡単ですので。 初回リリースは英語版です。（日本語ローカライズ版作りました！！） そもそも、このプラグインを作ったきっかけは、Redisを使ってWordpressを超高速化するという手法を知って、実際に試したら、びっくりするほど速くなったので、本人的には満足していたのですが、この高速化手法を利用するにはRedisというインメモリーデーターベースを利用できる必要がありまして・・・。自分でサーバーまるごと、運用している場合であれば、Redisを使った手法を用いるのがベストだと思うのですが、Wordpressホスティングサービスを提供しているような業者のサイトではRedisを使うことが出来ないだろうなと思い当たりまして、じゃぁ Redisに依存しない高速化版を作っちゃおうというのが開発の動機です。動作環境はWordpressが動いている、つまりPHPが動いている環境さえあれば、Pearのライブラリーであるとか、Redis、その他のサービス等 一切依存しないプラグインですので、どんな環境でも動くはずです。 Redisを使った高速化手法については、こちらの記事を参照ください。 インストールについては、現在 WordPress.orgさんでPlugin審査中ですので、本サイトからダンロードして利用してください。（その方法も後述します。） プラグインの機能 ページキャッシング このプラグインを導入した後は、Wordpressを公開しているサーバーの有効なURLへアクセスがあると、そのURLへのリクエストが初めてであるかどうか（キャッシュが在るかないか）を判定して、キャッシュがなければ、Wordpressへ処理（Request）を転送し、通常通りWordpressにページ生成してもらい、アクセスしてきたブラウザー（人）へページを返します。と、同時にこっそりキャッシュファイルをサーバー上に作っちゃいます。次に同じURLにリクエストがあった場合には、Wordpressを一切介さずに、キャッシュファイルを即返します。（この処理がめっちゃ速い！） キャッシュ全クリア プラグインの管理画面から、既にキャッシュされているファイルを全部クリアしちゃう機能です。どのような用途に用いるかというと、ページキャッシュをしちゃうと、サイドバーなどに配置されているランキング表示であるとか、最近の投稿一覧が更新されないケースがあります。（キャッシュがかかっていてもリフレッシュされるかどうかは、利用しているプラグインに依存します。） ランキングぐらい、多少古くても構わないのですが、新しく投稿を追加した場合などは、どのページにアクセスしてくれた人にも、そのことを通知できる方が良いので、一旦キャッシュを全部消しちゃおうという時に使います。 キャッシュ再構築 プラグインの管理画面から、投稿（Post）に対するキャッシュを再構築する機能です。 どんな時に使うかというと、キャッシュを一旦全クリアしちゃった後、ブラウザーでどのページヘアクセスしても、速度が極端に落ちます。その理由はキャッシュファイルがないから、通常通りWordpressさんにページ作成を依頼しているためです。第一印象って大事です。せっかくGoogle検索で引っ掛けてもらって、自分のサイトへ引き込んだはいいが、いつまで立ってもページが表示されない（かなり遅いという意味）では、イメージダウンです。なので、キャッシュを全部クリアしちゃった後は、公開ポストに対して１度ずつアクセスしちゃえば、キャッシュが再構築されるということになります。でも、公開ページがうん百ページある場合、手作業でブラウザーでアクセスする作業は気が遠くなります。ですので、この作業をボタンワンクリックで済ませちゃおう！というのがこの機能です。 インストール WORDPRESS_ROOT    >>   をWordpressのルートディレクトリーと読み替えてください。 手作業によるインストール WordPressの管理画面から、新規プラグインのインストールを選択し、「Text Cache Controller」で検索してインストールしてください。といいつつ、これが可能になるのは WordPressさんのプラグイン申請を通過した後になりますので、あと１〜２週間はかかっちゃうと思います。それまでの間は、後述するDownload URLよりZipファイル(text-cache-controller-latest.zip) をダウンロードして、プラグイン管理画面の新規追加画面で、アップロードを選んで、本プラグインをインストールしてください。 プラグイン管理画面で、「有効化」してください。これでダッシュボードの「設定」の中に本プラグイン「Text Cache Controller」を選択できるようになります。 WordPressのルートフォルダにある index.phpファイルをコピーして、名前をoriginal_index.php とします。 本プラグインフォルダにある index-textcache.php というファイルを WORDPRESSのルートフォルダに index.php という名前でコピーします。（上書き） 以上です。簡単でしょ。 コピーの部分も自動化しても良かったのですが、権限の関係とかでトラブっても困りますし、内部で何が行われているか理解できないと、使ってくださる方も不安かもなと思って、この部分は手作業で行ってください。 コマンドラインでインストールする方法 プラグインのインストール自体は、上記の方法で行ってください。 インストール後、ファイルをコピーする部分をコマンドでやるとこんな感じですよというのを示しておきます。 [bash] $ cd WORDPRESS_ROOT $ cp index.php original_index.php $ cp wp-content/plugins/text-cache-controller/index-textcache.php index.php [/bash] ダウンロード text-cache-controller-latest2.zip スクリーンショット プラグイン管理画面 on WordPress 設定項目はわずか２つだけで、非常にシンプルです。 １つは、コントローラ名。これはセキュリティを考慮してキャッシュするフォルダ名を変更するための設定です。 もう１つは、動作モード。出力されるログを簡易なものにするか、詳細なものにするかの設定です。トラブルが起こった時などは詳細モードにして、ログを閲覧すると原因がわかるかもしれません。もしくはこのページの投稿欄にでも、ログの内容を貼り付けていただければ、何らかのアドバイスが可能となります。 あとは、キャッシュを全てクリアするためのボタン。キャッシュを再構築するためのボタンがあります。 その他、インストールの完了ステータス。（上記のindex.phpのコピーがちゃんとできているかどうかなどをチェックし、その結果を表示します。）、簡易なインストールマニュアルが表示されます。 パフォーマンスの改善度合い（実際に運用している環境のもの） 本プラグインが出力したログファイルのスナップショットです。 １０００倍ぐらい速くなってるでしょ？ これは、たった今、運用しているサイトから引っこ抜いたログです。 運用サーバーが非力であるということはしょっぴいても、１０秒オーバーとかありえないっすよね。Wordpressさん。 キャッシュが効いてたら、0.001秒　ぐらいですからね。何倍ですかね・・・ [bash] 2014-03-31 18:54:12 TotalTime : 0.00097 This response is using CACHE!! 2014-03-31 18:54:23 TotalTime : 0.00073 This response is using CACHE!! 2014-03-31 18:54:55 TotalTime : 0.00099 This response is using CACHE!! 2014-03-31 18:54:56 TotalTime : 0.001 This response is using CACHE!! 2014-03-31 18:57:37 TotalTime : 0.0012 This response is using CACHE!! 2014-03-31 19:02:44 TotalTime : 0.00156 This response is using CACHE!! 2014-03-31 19:02:56 TotalTime : 10.77431 This request is Forward to WordPress(with Creating CACHE) 2014-03-31 19:05:04 TotalTime : 0.00104 This response is using CACHE!! 2014-03-31 19:06:01 TotalTime : 1.80017 This request is Forward to WordPress(with Creating CACHE) 2014-03-31 19:07:04 TotalTime : 2.94627 This request is Forward to WordPress(with Creating CACHE) 2014-03-31 19:07:12 TotalTime : 0.00092 This response is using CACHE!! 2014-03-31 19:08:05 TotalTime : 0.00102 This response is using CACHE!! 2014-03-31 19:10:12 TotalTime : 0.0007 This response is using CACHE!! 2014-03-31 19:11:22 TotalTime : 0.00086 This response is using CACHE!! 2014-03-31 19:11:23 TotalTime : 0.00138 This response is using CACHE!! 2014-03-31 19:11:29 TotalTime : 0.00105 This response is using CACHE!! 2014-03-31 19:11:35 TotalTime : 0.00106 This response is using CACHE!! 2014-03-31 19:11:41 TotalTime : 0.00114 This response is using CACHE!! 2014-03-31 19:12:21 TotalTime : 0.00142 This response is using CACHE!! 2014-03-31 19:13:34 TotalTime : 0.00144 This response is using CACHE!! 2014-03-31 19:13:53 TotalTime : 5.92524 This request is Forward to WordPress(with Creating…

  • Increase your WordPress Performance Up To 1,000% — 100,000% – Text Cache Controller plugin
    2014年3月27日

    Introduction Hi,everyone. I’m happy to introduce this plugin to you .This plugin is a page caching system for wordpress inspired by jeedo aquino.This plugin is written for users who cannot install a Redis(In-Memory Database) on the server hosting WordPress,because of limitation of the hosting service.This plugin increase WordPress Performance Up To 1,000% — 100,000%(This score is not joke.) This plugin requires no other Services(Redis,MongoDB,etc…) or Libraries(pear,System_daemon). Now,this plugin are currently pending review of WordPress.org.But you can download the plugin from this site. Installation and Un-instlattion is very easy. Let’s Enjoy this plugin!! Functions of Plugin Page Caching When a visitor access to a permalink on your site,if the permalink is cached, this plugin returns a chached page.Else, forward the request to wordpress and create cache file ,then return a resopnse to the visitor. Clear Caches In plugin control panel of WordPress, you can clear all cached files. Re create Caches In plugin control panel of WordPress, you can generate a pege (URL) which can make you to re-create a whole caches. Installation WORDPRESS_ROOT    >>   Wordpress installed directory Install this plugin from wordpress admin panel.(Now,this plugin are currently pending review of WordPress.org. So,you download the plugin from this site,and upload the download file(text-cache-controller-latest.zip) to your WordPress. Activate the plugin through the ‘Plugins’ menu in WordPress Copy index.php which is in WORDPRESS_ROOT to original_index.php. Copy index-textcache.php which is in this plugin directory to WORDPRESS_ROOT/index.php. example of linux commands. [bash] $ cd WORDPRESS_ROOT $ cp index.php original_index.php $ cp wp-content/plugins/text-cache-controller/index-textcache.php index.php [/bash] Downlaod text-cache-controller-latest2.zip Screen Shots Plugin Controll Panel on WordPress Perfomance Inprovements This is a sample of Logfile of this plugin. Increase WordPress Performance Up To 1,000% — 100,000% Here is a log of this site,really now. My server machine is poor ,but if chache is enabled ,the performance improve 100,000%…

  • WordPressにGoogle Analytics Popular Posts 設置、CSS調整、ランキング数値追加カスタマイズ
    2014年3月23日

    自身のWordpressサイトの人気記事をGoogle Analyticsと連動して、自動的にピックアップしてくれるプラグイン Google Analytics Popular Posts のご紹介。加えて、CSSのカスタマイズ方法、ランキング記事タイトルの横に実際のランキング（1位、2位、etc…）をつけるカスタマイズ方法について説明します。 このプラグインを選んだ理由 もうひとつ有名なプラグインに「WordPress Popular Posts」というのがあって、ソッチのほうがサムネイル表示とかも出来て、優れている面もあるのですが、多分ランキングのカウンターの集計方法が独自ロジックとなっちゃってる上に、自分が投稿追加後、頻繁にアクセスに行くと、その記事がランクインしてしまったりと（運用開始時はすべての記事へのアクセス数がゼロになるためだと思われる・・）。またIPフィルター機能などもないので、自分がアクセスしたものもカウントされてしまうため、Google Analyticsさんの情報を信じるほうが堅いし、既にGoogle Analyticsを利用している場合は、設置当初から、厳密に集計されたランキングデータが表示されることになるので、今回紹介するプラグインを導入することにしました。 プラグインインストール プラグインの導入に関しては、Wordpressのダッシュボードから、プラグインに移動し、「Google Analytics Popular Posts」で検索することで簡単にインストールできます。インストール後、プラグインを有効化し、プラグインの設定を調整します。 プラグイン設定 設定する箇所は、GoogleAnalyticsのアカウント情報に加え、以下少々。 お好み次第ですが、私の場合、ランキング表示の見栄えを自分のサイトに合わせたかったので、 ・カスタムスタイルシートを有効にするを「はい」 ・キャッシュ機能を有効にしますか　を「はい」 としました。 GoogleAnalytics関連の設定 GoogleAnalyticsの設定で少し迷ったところを補足。 メールアドレスと、パスワードに関しては、多分問題ないと思います。 GoogleAnalyticsプロファイルID というやつが何を指すのかわからなかったのでちょっと調べました。 GoogleAnalyticsにログインし、アナリティクス設定をクリック ビュー設定をクリック ここに表示されているビューIDが、　プラグイン側でいう、GoogleAnalyticsプロファイルID です。 では、設定が完了したら、ページ下部のSaveボタンをクリックしましょう。 ウィジェット設定 WordPressのダッシュボードから外観＞＞ウィジェット を選び、左側にリストされている「人気記事」をご自身が表示したい、サイドバーにドラッグしましょう。 動作確認 これで、Wordpressサイトにランキングが表示されるはずです。確認してみてください。 ランキング表示調整 では、この表示設定を調整してみましょう。 対象となるファイルは、/wordpress/wp-content/plugins/google-analytics-popular-posts/ フォルダ内の ・google-analytics-popular-posts.css ・google-analytics-popular-posts.php の２ファイルとなります。 CSSは、ご自身のサイトに合うように調整すればOKなのでお任せします。 設定例）CSS [css] .popular_post { background: transparent; border-left: 1px solid #fafafa; border-bottom: 1px solid #fafafa; # -moz-border-radius: 8px; # -webkit-border-radius: 8px; # border-radius: 8px; # -moz-box-shadow: inset 0 0 5px 5px #f5f5f5; # -webkit-box-shadow: inset 0 0 5px 5px #f5f5f5; # box-shadow: inset 0 0 5px 5px #f5f5f5; behavior: url(pie/PIE.htc); padding: 3px 3px; margin: 10px 0 0 0; } [/css] ランキング表示に、ランキングの数値をつける このプラグインは、Google Analyticsのアクセス情報からランキング情報をピックアップしてくれますが、記事タイトルの横に順位が表示されません。そのぐらい対応してほしいなぁと思うところですが・・、ないものは仕方ありません、カスタマイズしちゃいましょう。 google-analytics-popular-posts.php のPHPファイルを開きます。 「require ‘gapi.class.php’;」で検索をかけてみてください。 その少し下にある foreach から始まる部分がランキングを表示している部分となります。ですので、この部分をちょこっとカスタマイズします。カスタマイズ内容はハイライトしてある部分となります。 [diff mark=”13,23-26,37-40,58″] if(!ga_email || !ga_password || !ga_profile_id) { $output = __(‘<b>Google Analytics Popular Posts Error :</b><br />Please enter your account details in the options page.’, ‘google-analytics-popular-posts’); return $output; } $GAPP_filter_fixed = ‘ga:pagePath=~^/’; require ‘gapi.class.php’; $ga = new gapi(ga_email, ga_password); $ga->requestReportData(ga_profile_id, array(‘hostname’, ‘pagePath’), array(‘visits’), array(‘-visits’), $filter=$GAPP_filter_fixed.$GAPP_filter, $start_date=$From, $end_date=$date, $start_index=1, $max_results=$GAPP_mRs); if ($GAPP_dDisp == “yes”) { $output = ‘<p class=”popular_stats_date”>’.$From.’ ～ ‘.$date.'</p>’.”\n”; } + $cnt = 1; foreach($ga->getResults() as $result) : $getHostname = $result->getHostname(); $getPagepath = $result->getPagepath(); $postPagepath = ‘http://’.$getHostname.$getPagepath; $getPostID = url_to_postid($postPagepath); if ($getPostID <= 0) { $titleStr = $postPagepath; $output .= ‘<ul>’.”\n”; $output .= ‘<li>’.”\n”; – $output .= ‘<div class=”popular_post”>’.”\n”.'<a href=’.$postPagepath.’>’.$titleStr.'</a></div>’.”\n”; + $output .= ‘<div class=”popular_post”>’.”\n”; + $output .= ‘<span>’.$cnt.’.</span>’; + $output .= ‘<a href=’.$postPagepath.’>’.$titleStr.'</a></div>’.”\n”; $output .= ‘</li>’.”\n”; $output .= ‘</ul>’.”\n”; } else { $titleStr = get_the_title($getPostID); $post = get_post($getPostID); $dateStr = mysql2date(‘Y-m-d’, $post->post_date); $contentStr = strip_tags(mb_substr($post->post_content, 0, 60)); $output .= ‘<ul>’.”\n”; $output .= ‘<li>’.”\n”; – $output .= ‘<div class=”popular_post”>’.'<a href=’.$postPagepath.’>’.$titleStr.'</a><br />’.”\n”; + $output .= ‘<div class=”popular_post”>’; + $output .= ‘<span>’.$cnt.’.</span>’; + $output .= ‘<a href=’.$postPagepath.’>’.$titleStr.'</a><br />’.”\n”; if ($GAPP_pDisp == “yes” and $GAPP_cView == “yes”) { $output .= ‘<div class=”popular_post_date”>’.$dateStr.'<br /></div>’.”\n”; $output .= ‘<div…

  • WordPress の表示速度を驚くほど高速化させる方法！〜Redis連携
    2014年3月23日

    WordPressサイトを運用していて、表示速度が遅いなぁと感じたことありませんか？高速化のためのプラグインであるとか、VPSなどでホスティングされている場合はApacheやNginxのチューニングを行ったりしますよね。今回は追加でプラグインを入れたり、チューニングをしたりせずに、ちょっと別角度からWordpressサイトを超！！高速化させる方法をお伝えします。 といっても、私がすごいわけではなく、以下のサイトのjeedoさんが、Greatな仕事をしてくださったおかげです。みなさんこの記事で、高速化に成功したら、是非下記サイトにコメント入れてみてください！ jeedo.net — Al-Jedidiah Aquino 高速化プラグインを作成しちゃいました！（RedisなしでOK） この記事は　RedisというインメモリーデーターベースをWordpressをホストしているサイトで利用できることが前提である。が・・・ WordPressの機能を提供しているサービスでRedisを自由に使わせてくれるところなんて、そうそう無いだろうと・・。じゃぁRedisがなくても高速化できたら、きっと役に立つシーンもあるだろうなということで、Wordpress用プラグイン作っちゃいました。 よろしかったら、こちらを参照ください。 「Wordpressのパフォーマンスを10倍から1,000倍 速くできるかもなプラグインを作った 〜 Text Cache Controller plugin」 Redisを使った高速化をしようという方は、引き続き、以下をご覧ください。 テクニックの中身 Apacheをチューニングしたり、いくら高速なマシンにしても、Wordpressサイトの表示速度を最終的に決めるのは、Mysql＋PHPによる動的ページ生成の速度にかかっている。つまり、マシンが高速でメモリもふんだんに積んでいて、チューニングもそこそこできていれば、それなりに良いレスポンスは期待できる。だが、あくまでそれなりに、なのである。Wordpressは非常に優秀なOSSであるが、ページを表示するためにMysqlデータベースへアクセスし、いろいろな情報を拾い集め、PHPのソースがそこそこふんだんに走り、その後で綺麗に整形されたページが、あなたのサイト訪問者に提供される。 動的にページ生成するのだから、それなりに時間がかかるのは仕方がない。じゃぁこの部分をキャッシュしてみようって試みが、いくつかの有名なWPプラグインで提供されていたり、ApacheやNginxの設定をあれこれいじりまわして、キャッシュを有効にする方法である。私が実際に試したわけではなく、色んなサイトを軽く閲覧した感じでは、あれこれ苦労した結果、パフォーマンス改善されたパーセンテージは１０〜２０％とのこと。そんなことないよっていう方もいらっしゃるかもしれませんが、そのあたりは詳しく調査したわけでもなく、実際に試したわけでもないのでご勘弁ください。 と、前置きはこのぐらいにして、じゃぁ今回紹介するテクニックはどうすごいのかというと、インメモリデータベースであるRedisを使ってWordpressのページをキャッシングしちゃおうよ！ってところである。そもそもWordpressを運用されている方は、Wordpress導入手順に従って、なんとかかんとかサイトを導入した方も多いと思われるので、データベース Mysqlがなんであるとか、Wordpressがそのデータベースを使ってどう動いているとか、そんなところまで突っ込んで研究している方はほとんどいないと思われる。 その上Redis？インメモリデータベース？？などと言われてもさっぱり意味がわからないというのが正直なところであろう。 でも、ご心配なく！ そんなことはさっぱりわからなくても、以下の簡単な手順をふむだけで、あなたのWordpressサイトが劇的に高速化されます！（なんか、どっかの宣伝マンみたいだな・・・笑） Redisインストール Redhat系Linuxの場合（CentOS等） Remiとか追加のyumソースがないと以下では多分エラーになります。 [bash] $ sudo yum install redis [/bash] 上記にもし失敗したら、CentOS 6.xの場合、FedoraプロジェクトからRPMをダウンロードしてインストール可能です。 x86じゃないよ！、64bit PCじゃないよという場合は、 http://dl.fedoraproject.org/pub/epel/6/へアクセス！ [bash] $ wget http://dl.fedoraproject.org/pub/epel/6/x86_64/redis-2.4.10-1.el6.x86_64.rpm $ sudo rpm -ivh redis-2.4.10-1.el6.x86_64.rpm [/bash] サービスの起動、自動起動設定 [bash] $ sudo service redis start $ sudo chkconfig –level 35 redis on [/bash] CentOS6でもない場合は、以下のサイトにアクセスして、自分のOSにマッチしそうなRPMをダウンロードしてインストールしてください。 http://www.rpmfind.net/linux/rpm2html/search.php?query=redis Debian系Linuxの場合（debian/Ubuntu/Mint/LMDE等） [bash] $ sudo apt-get install redis-server sysv-rc-conf [/bash] サービスの起動、自動起動設定 [bash] $ sudo service redis-server restart $ sudo sysv-rc-conf redis-server on [/bash] jeedoさんのサイトから、高速化PHPファイルダウンロード jeedoさんのサイト 以下の２ファイルをダウンロード Redis連携PHPファイル ダウンロード（PHPファイルへの直リンクなので、右クリック、名前をつけて保存でOKです。） WordPress Redis連携高速化PHPファイル ダウンロード Zipファイル展開、Wordpress運用サイトへファイル転送 後者のファイルはZip形式なので、手元で解凍してください。 wp-index-redis.php という名前の１ファイルが展開されます。 ダウンロードした２ファイル、つまり、 predis.phpと wp-index-redis.php をWordpressをホストしているサーバーへアップロードしてください。 いよいよインストール 補足）debian系OSの場合は、chown apacheではなく、おそらく chown www-data です。 [bash] *** WordPressのルートフォルダへ移動 $ cd /var/www/wordpress *** 高速化ファイルをWordpressのルートフォルダへ移動 $ sudo mv /home/xxxxx/Downloads/wp-index-redis.php . $ sudo mv /home/xxxxx/Downloads/predis.php . *** 権限設定を調整 $ sudo chown apache:apache wp-index-redis.php $ sudo chown apache:apache predis.php $ sudo chmod 644 wp-index-redis.php $ sudo chmod 644 predis.php *** WordPressの index.phpを to_index.phpにリネーム $ sudo mv index.php to_index.php *** WordPress Redis連携高速化PHPを wp-index-redis.phpを index.phpにリネーム $ sudo mv wp-index-redis.php index.php [/bash] Apache or Nginx再起動(必要ないかもです・・） [bash] $ sudo service nginx restart or $ sudo service httpd restart [/bash] 以上です。 初回アクセスは、普段と変わらないと思いますが、２回目から劇的に高速化されます。Wordpressに管理者権限でログインしていると キャッシュが有効にならないようです。（その方がページ更新した時のチェックなどを考えるとありがたい。） WordPressにログインしていない別のブラウザーで試してみるか、プライベートブラウズモードで、自分のサイトの高速化度合いを体感してみてください！！ jeedoさんの注意書き、+ なんちゃって日本語訳 jeedoさんの注意書きは、以下となっています。 Pages are not cached when you are logged in. Cached pages do not expire not unless explicitly deleted or reset (deleting the entire domain cache). Appending a ?c=y (e.g. domain.com/?c=y) to a url deletes the entire cache of the domain. Only works when you are logged in. Appending a ?r=y to a url deletes the cache of that url. Refreshing (F5) a page deletes the cache of that page. Script still works even if allow_fopen is disabled in php. Submitting a comment deletes the cache of that page. Includes a debug mode, stats are displayed at the bottom most part after . Won’t be deleted…

< >

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

Recent Comments

    Back to Top