Hinemosu » WordPress

コメントシステム「DISQUS」導入

hide10 — Wed, 14 Dec 2011 04:24:25 +0000

ブログのコメント欄を拡張するシステム「DISQUS」を導入して、コメント欄をシャレオツにしてみたよ。

「DISQUS」は見た目をカスタマイズできるんだけど、ウチではこんな感じにしてみました。

下にスクロールすれば実際に動いてるのを見られるよ。

それともうひとつ。「DISQUS」の導入ついでに、ブログにコメントするには認証が必要な設定にしました。

ツイッターやFacebook、Googleアカウントで認証できるので、良ければ一度試してみてくださいね。

Googleの「Page Speed Service」を使ってみた

hide10 — Wed, 09 Nov 2011 02:59:45 +0000

自動でWebサイトを高速化してくれる「Google Page Speed Service」(PSS)を使ってみたよ。

いま www.hide10.com にアクセスしているヒトは、PSS適用後の「高速化済みページ」が表示されているはずです。

Page Speed Serviceの導入

現在「Page Speed Service」は限定的な無償トライアル中です。試してみたい人は、リンク先ページから「Sign Up」ページに飛び、必要事項を記入して送信しましょう。

数日～数週間すると、メールで「使えるようになったよ」という連絡が届くはずです。

その後、Google APIs Consoleにアクセスし、「Page Speed Service」の「DomainSetting」から設定変更を行います。詳細は「Initial Setup」を参照して貰うとして、ザックリ説明するとこんな感じ。

高速化するWebサイトのドメインを登録する
ドメインの認証を行う
参照用ドメインの設定を行う
DNS CNAMEを登録する

たったこれだけの設定で、サイト上にある全ページが、自動で勝手に「最適化された高速なページ表示」に変わります！

PSSの設定例として、ウチのサイトのDNS設定を張っておきますね。サイト側での対応はコレだけで済みました。

上記設定の簡単な説明は以下の通りです。

“txt @ google-site-verification=xxxxxx”がドメイン認証設定
“a ref.hide10.com 49.212.18.239″が参照用ドメイン設定
“cname www ghs.google.com.”がCNAMEの登録

設定変更後のPSS動作をおおまかに説明すると…

“www.hide10.com”へのアクセスが”ghs.google.com.”に飛ばされる
“ghs.google.com.”は”ref.hide10.com”を参照して元データを取得
PSSが適切な「高速化済みページ」を”www.hide10.com”として表示する

と言う感じになります。

☆ Google Page Speed Serviceのベータテストに参加 – buzzword update [参考リンク]

表示速度比較

PSS適用後の速度アップを確認するため、「WebPagetest – Comparison Test」を利用して、サービス適用前後の比較動画を作ってみました。

Google Page Speed 適用前後 – YouTube

描画終了までが1割近くスピードアップしてる！画像が表示されるのも速い！

サイトの表示速度は早いに越したことはないので、PSSを使うメリットはありそうですよ。

画像圧縮比較

PSSには、自動で画像を圧縮する機能も付いています。

圧縮による画質の違いを確認するため、比較画像を作ってみました。左が元画像でファイルサイズ166kB、右が圧縮後の画像で57kBです。

ブログ上で見るとPSSの圧縮が効いちゃうので、画像をクリックしてオリジナル画像を参照して下さいね。

よーく見ると違いがあるけど、このサイズの画像なら気にならないレベルじゃない？

ウチは画像が多めだし、圧縮による速度アップが大きく期待できそうですよ♪

Ktai Styleはオフにした

PSSは自動でページキャッシュが有効になる上に、動的にキャッシュの状態や内容を制御することが出来ません。

そのため、Ktai StyleなどのUAによって表示を切り替えるプラグインが動作していると、ユーザーのアクセスによってキャッシュする内容が決まってしまうことになります。

結果的にはPCアクセスなのにケータイ画面が表示されちゃったり、ケータイアクセスなのにPC画面が表示される不都合が発生します。

そんなワケでPSSを敬遠していたのですが、今回は試しにKtai Styleをオフにしてみました。これでしばらく運用を続け、アクセス数やアフィリエイトへの影響を探ってみようと思っています。

トラックバックの受け付けを終了しました

hide10 — Fri, 04 Nov 2011 08:43:33 +0000

本日を持ちまして、当ブログ「Hinemosu」に対するトラックバックの受け付けを終了しました。

もう世間はトラックバックを求めていないと思うので、サックリとオフにしちゃいます。

行く行くはブログコメント欄も廃止し、facebookコメントやツイッターなどに置き換えていきたいと考えています。

トラックバックをオフにする方法まとめ

WordPressでトラックバック受け付けをオフするため、以下の作業を行いました。

新規記事のトラックバックをオフに

まず、管理画面の「設定」-「ディスカッション」を開き、上から2番目にあるチェックボックス「他のブログからのリンク通知を許可する」のチェックを外します。

これで新規記事作成時の「ディスカッション」設定初期値が変更されます。

既存記事のトラックバックをオフに

次に既存記事のトラックバック受け付けをオフにします。

残念ながらWordPress本体ではトラックバックを一括オフにすることはできないようです。

そこでSQLのupdateクエリを発行し、一括してdb設定を変更します。phpMyAdminなどのツールを活用し、以下のクエリを発行して下さい。

update wp_posts set ping_status='closed';

これで全記事のトラックバック受け付けがオフになります。

☆ [wordpress]過去エントリのコメント/トラックバックを一括で禁止する – groundwalker.com

WordPressでサイトアドレス（URL）を間違えて設定しちゃった場合の対処方法

hide10 — Mon, 06 Jun 2011 04:54:31 +0000

WordPressでサイトURLを間違えて設定しちゃった場合の対処方法をメモっておくよ。

WordPressの管理画面にある「一般設定」では、「WordPressのアドレス（URL)」と「サイトのアドレス（URL)」が設定可能です。

この設定、気軽に変更できちゃうワリに影響範囲が広く、ウッカリ間違えて設定すると管理画面にアクセスできなくなります。

管理画面にアクセスできないと言うことは、設定を修正することも出来ないワケで。

一見すると手詰まりな状態に見えますが、実はwp-config.phpに’WP_SITEURL’と’WP_HOME’を定義すると、これらの設定を上書き出来ます。

具体的な記述例はこんな感じ。wp-config.phpに下記設定を追加し、サーバのWordPressルートディレクトリに保存します。

    define('WP_SITEURL', 'http://example2.com');
    define('WP_HOME', 'http://example2.com');

設定URLには、http:// は記入し、末尾のスラッシュ “/” は入れないでください。

これで一時的に「正常なアドレス」で動くようになるので、再び管理画面にアクセスし、「WordPressのアドレス（URL)」と「サイトのアドレス（URL)」を修正します。

設定が終わったら、wp-config.php に追加した ‘WP_SITEURL’ と ‘WP_HOME’ の定義は削除して下さい。

そもそもwp-config.phpの場所や編集方法が分かんないよ！って場合は、「wp-config.php の編集 – WordPress Codex 日本語版」を読んでくださいね。

☆ WordPress アドレス (URL) : wp-config.php の編集 – WordPress Codex 日本語版
☆ ブログアドレス (URL) : wp-config.php の編集 – WordPress Codex 日本語版

WordPress用MySQLクエリメモ

hide10 — Thu, 28 Apr 2011 01:47:37 +0000

ブログの引っ越しやプラグイン変更などで、WordPressが管理するデータを一括編集したい時、phpMyAdminを使ってMySQLクエリを発行すると便利です。

ここでは、私が実際に活用したMySQLクエリを紹介すると言う名目で、自分用メモを残しておきます。

クエリの使い方

phpMyAdminを開き、該当データベース選択します。

「クエリ」タブを開き、「データベース xxx のSQL:」欄にコマンドを入力して実行してください。

クエリ例

ここでは一括変更したいと思った理由と、その解決方法をメモっていきます。

目的

SyntaxHighlighter プラグインの乗り換え時、コード指定をHTML→htmlのように、アルファベット大文字から小文字に変更する必要がありました。

しかし、コード指定が複数種類ある上に、変更する記事が複数に渡るため、手動で検索・変更するのは大変です。

そこでMySQLクエリを活用しました。

どんなタグを使っているのか調べる

どんなタグを使っているのか調べる為、以下のクエリを発行します。

これによりWordPressの記事本文中から、[]で括られた大文字アルファベットの連続を含む記事が抽出されます。

SELECT *  FROM `wp_posts` WHERE `post_content` REGEXP '\\[[A-Z]+\\]'

[DVD]を除いて再抽出

抽出された記事を確認したところ、Amazonアフィリエイトリンクで[DVD]と言う単語を使ってる記事まで引っかかってしまいました。

上記クエリを修正し、[DVD]を除いて抽出を行います。

SELECT *  FROM `wp_posts` WHERE (BINARY post_content REGEXP '\[[[:upper:]]\]' AND BINARY post_content not like '%DVD%')

[CSS]タグを置き換える

抽出された記事を確認したところ、殆どが”CSS”タグで、他のタグはごく少数でした。

数の多いCSSはクエリで一括置換し、その他は手動で修正することにします。

WordPressの記事本文中から、[CSS]を探しアルファベット小文字に置き換えるには、以下のクエリを発行します。

UPDATE wp_posts SET post_content=REPLACE(post_content,"[CSS]","1に置き換えるには以下のクエリを発行します。

UPDATE wp_posts SET post_content=REPLACE(post_content,"[/CSS]","[/css]");

クエリ例２

記事毎のPVを表示するプラグインを外したので、該当プラグインが使用していたデータを削除します。

phpMyAdminでデータベースを調べたところ、wp_postmeta の “views” が該当するようです。

念のため、viewsだけ抽出して内容に間違いがないか確認します。

select * from wp_postmeta WHERE `meta_key` = 'views'

目視で間違いなく不要なデータであることを確認したので、’views’を一括して削除します。

DELETE FROM `wp`.`wp_postmeta` WHERE `meta_key` = 'views'

WordPress : wp-config.phpを移動した

hide10 — Mon, 28 Mar 2011 07:10:00 +0000

WordPressの環境設定を行なうファイル「wp-config.php」を、ルートディレクトリのひとつ上に移動しました。

『WordPressのインストールが完了したら真っ先にwp-config.phpをドキュメントルートの直上に移動させよう – 頭ん中』を読んで知ったのですが、wp-config.php はルートディレクトリの1個上まで探してくれるそうです。

wp-config.phpを移動しておけば、うっかり設定ミスなどでPHPファイルが丸見えの状態になっても、ルートの1個上は外から見えないので安心、という流れ。

そもそもPHP丸見えってどういう状況よ、と言う突っ込みもあると思いますが、大した手間が掛かるわけでもないし、やっといて損はないと思いますよ。

☆ wp-config.php の編集 – WordPress Codex 日本語版
☆ WordPressのインストールが完了したら真っ先にwp-config.phpをドキュメントルートの直上に移動させよう – 頭ん中

WordPress: Jetpack をインストールした

hide10 — Wed, 23 Mar 2011 03:57:18 +0000

WordPress.comで提供されている便利機能を、インストール型WordPressでも使えるようにするプラグイン「Jetpack」をインストールしたよ。

Jetpackの機能を一言で説明すると、ブログ管理者向け便利機能の詰め合わせだと思いねぇ。

Jetpackについて

数日前からWordPress.com Statsが不調なので対応策を調べたところ、上位プラグインとも言える「Jetpack」をインストールすれば良いと分かりました。

JetpackはWordPress開発元のAutomattic社が提供するプラグインで、WordPress.comの便利機能を、ウチみたいな「インストール型WordPress」でも使えるようにしてくれるプラグインです。

Jetpackで利用可能になるサービスとしては、WordPress.com Statsに始まり、Twitterウィジット表示、Gravatarホバーカード対応、WP.meの短縮URL取得、LaTeX投稿対応、ソーシャルメディア対応ボタンの追加、ショートコード機能拡張など多様で、今後も各種サービスが利用可能になるようです。

そんな感じの便利風味プラグインですので、WordPressでブログを書いてる人は迷わず入れちゃって良いプラグインだと思うよ。

☆ Jetpack
☆ detlog.org » Jetpack で WordPress.com クラウドを活用
☆ インストール型 WordPress を Jetpack でパワーアップ — ブログ — WordPress.com

さくらのVPS 1.5G、OS UbuntuでWordPressを動かす作業メモ

hide10 — Tue, 22 Mar 2011 02:49:38 +0000

さくらのVPS 512から、さくらのVPS 1.5Gへ移行した時の作業メモです。

基本的に上から下に向かって作業しています。OSをUbuntuに入れ換えて、WordPressを安定稼働させるのが目標です。

あくまで自分用メモですので、内容の正当性は保証しません。このメモは随時更新されます。参照する場合は参考までにどうぞ。

移行時に下記サイトを参考にさせて頂きました。貴重な情報提供ありがとうございます。

☆ Satake Studio Developer’s Blog » さくらのVPS引越し手順完全版
☆ さくらVPSでWordpress運用するまでの手引き on ubuntu-T&T

申し込み
OS再インストール
LAMPセットアップ
SSHセットアップ
ntpセットアップ
mysqlセットアップ
mod_rewrite, mod_expires有効化
Apache設定変更
phpMyAdminのインストール
WordPress用データベースの作成
WordPress用データベースのインポート
WordPressのインストール
ロケールを ja_JP.UTF-8 にする
muninインストール
visitorsインストール
memcacheインストール
WordPressのSSH2接続
muninにMySQL監視を追加(別ページ)
WordPress用のMySQLチューニング(別ページ)

申し込み

「さくらのVPS｜VPS（仮想専用サーバ）はさくらインターネット」から、「さくらのVPS 1.5G」の利用申請。

2分ほどでVPSが稼働した旨を告げるメールが届く。早い！

OS再インストール

初期OSであるCente OSをUbuntuに差し替える。

VPSコントロールパネル → OS再インストール → カスタムOSインストールへ → Ubuntu 10.04 i386

OSインストールは「SAKURA Internet // サポート – オンラインマニュアル – カスタムOSインストールガイド： Ubuntu 10.04」を見ながらやれば間違いない。

LAMPセットアップ

$ sudo apt-get install lamp-server^

1行打ち込むだけでWebサーバが立ち上がる。便利な時代だね。

SSHセットアップ

SSH接続用の鍵ペアを作成し、秘密鍵をローカルにコピーする。

$ cd ~
$ ssh-keygen
$ cp .ssh/id_rsa.pub .ssh/authorized_keys
$ chmod 755 .ssh
$ chmod 644 .ssh/*
$ cat .ssh/id_rsa
 # id_rsaをコピペ

sshの設定を変更する。

$ sudo vi /etc/ssh/sshd_config

file: sshd_config
    Port xxxx   #任意の番号に変更する
    PasswordAuthentication no

ntpセットアップ

ntpインストール後、ntpサーバを変更する。

$ sudo aptitude install ntp
$ sudo vi /etc/ntp.conf
    #file: ntp.conf
    server ntp.jst.mfeed.ad.jp
$ sudo service ntp restart
# ntpが実行されるまで、しばらく待つ
$ ntpq -p
     remote           refid      st t when poll reach   delay   offset  jitter
==============================================================================
*ntp2.jst.mfeed. 210.173.176.4    2 u    1   64   77    8.787    1.360   0.296
#行頭が * だったら接続成功

MySQLセットアップ

$ sudo vi /etc/mysql/my.cnf
    #file: my.cnf
    [client]
    default-character-set=utf8  #追加

    [mysqld]
    default-character-set=utf8  #追加
    character-set-server=utf8   #追加

mod_rewrite, mod_expires有効化

mod_rewriteは、URLを書き換えたり、リダイレクトするApacheのモジュール。

mod_expiresは、特定のファイルだけをキャッシュさせるApacheのモジュール。

$ sudo a2enmod rewrite
$ sudo a2enmod expires
$ sudo service apache2 restart

Apache設定変更

Apacheの設定ファイルを書き換える。

$ sudo vi /etc/apache2/sites-available/default
    #file: default
    
            ServerName hide10.com
            ServerAdmin webmaster@hide10.com

            DocumentRoot /home/user01/public_html
            
                    Options FollowSymLinks MultiViews
                    AllowOverride all
                    Order allow,deny
                    allow from all
            

            ErrorLog /var/log/apache2/error.log

            # Possible values include: debug, info, notice, warn, error, crit,
            # alert, emerg.
            LogLevel warn

            # LogFormat "%h %l %u %t \"%r\" %>s %b %T" common
            SetEnvIf User-Agent "internal dummy connection" dummyconnect
            CustomLog /var/log/apache2/access.log combined env=!dummyconnect
            # CustomLog /var/log/apache2/access.log common

            DeflateFilterNote Input instream
            DeflateFilterNote Output outstream
            DeflateFilterNote Ratio ratio
            LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%) %{User-agent}i' deflate
            CustomLog /var/log/apache2/deflate.log deflate

            ServerSignature Off
    
$ sudo /etc/init.d/apache2 restart

$ sudo vi /etc/apache2/apache2.conf
    #file: apatch2.cnf
    KeepAlive On
    MaxKeepAliveRequests 100
    KeepAliveTimeout 15

    
        StartServers          6
        MinSpareServers      25
        MaxSpareServers      30
        MaxClients          100
        MaxRequestsPerChild   2000
    
$ sudo /etc/init.d/apache2 restart

phpMyAdminのインストール

phpMyAdminのインストール。

$ sudo aptitude install phpmyadmin
    #Apache2 → Yes → パスワードx2

特定のIPアドレス以外はアクセスできないようにする。

$ sudo vi /etc/phpmyadmin/apache.conf
    file: apache.conf
    
            Order deny,allow        #追加
            deny from All           #追加
            Allow from IP-ADDRESS   #追加
    
$ sudo service apache2 restart

WordPress用データベースの作成

“DB_NAME”, “USER-NAME”, “PASSWORD-USER”は、wp-config.phpに設定する値。

$ mysql -u root -p
    # パスワード入力
mysql> create database DB_NAME;
mysql> create user USER-NAME@localhost identified by 'PASSWORD-USER';
mysql> grant all on DB_NAME.* TO USER-NAME@localhost;
mysql> exit

WordPress用データベースのインポート

うちはDBファイルが25MBもあるので、upload_max_filesizeの設定を変更する。

$ sudo vi /etc/php5/apache2/php.ini
    #file: php.ini
    upload_max_filesize = 30M
    post_max_size = 32M
$ sudo service apache2 restart

memory_limit > post_max_size > upload_max_filesize とする必要があるらしい。

設定変更後、phpMyAdminを利用して、データベースファイルをインポートする。

WordPressのインストール

ゴミを減らすため、新たにインストールし直し、必要なファイルのみ旧サーバからコピーする。

$ wget http://ja.wordpress.org/latest-ja.tar.gz
$ tar zxf latest-ja.tar.gz
$ mv wordpress /home/user01/public_html

wp-config.phpを旧サーバから上書きコピー。

https://api.wordpress.org/secret-key/1.1/salt/ にアクセスして取得したキーに書き換える。

ドメイン移行中は、wp-config.phpに下記設定を追加すると、DBの設定にかかわらず任意のURLで動作する。

    define('WP_SITEURL', 'http://example2.com');
    define('WP_HOME', 'http://example2.com');

その他、必要と思われるファイルをコピー。

ロケールを ja_JP.UTF-8 にする

$ sudo apt-get install language-pack-ja
$ sudo locale-gen ja_JP.UTF-8
$ sudo update-locale LANG=ja_JP.UTF-8
$ export LANG=ja_JP.UTF-8

muninインストール

サーバの状態監視ツール munin のインストール。「[Linux][Ubuntu][サーバ] サーバの状態監視ツール munin のインストール – Secondary Storage」を参考にしました。

$ sudo aptitude install munin munin-node
$ sudo vi /etc/munin/munin.conf
    #file: munin.conf
    htmldir /home/user01/public_html/munin
    [hide10.com]
$ cd ~/public_html
$ mkdir munin
$ chown munin:munin munin
$ sudo -u munin vi /home/user01/public_html/munin/.htpasswd
    # http://www.luft.co.jp/cgi/htpasswd.php で作成したパスワードを貼り付ける
    munin:******
$ sudo vi /etc/apache2/conf.d/munin
    #file: munin
    
            Order deny,allow
            deny from all
            AuthUserFile /home/user01/public_html/munin/.htpasswd
            AuthName "munin"
            AuthType Basic
            require valid-user
            Satisfy Any
    
$ sudo -u munin munin-cron

☆ [Linux][Ubuntu][サーバ] サーバの状態監視ツール munin のインストール – Secondary Storage

visitorsインストール

Apacheのログ解析ツール visitors のインストール。

$ sudo aptitude install visitors
$ mkdir /home/user01/public_html/visitors
$ sudo vi /home/user01/public_html/visitors/.htpasswd
    # http://www.luft.co.jp/cgi/htpasswd.php で作成したパスワードを貼り付ける
    visitors:******
$ sudo vi /etc/apache2/conf.d/visitor
    #file: visitor
    
            Order deny,allow
            deny from all
            AuthUserFile /home/user01/public_html/visitors/.htpasswd
            AuthName "visitors"
            AuthType Basic
            require valid-user
            Satisfy Any
    
$ sudo service apache2 restart

動作テスト。

$ visitors -GKZURDOBXYS -m 50 /var/log/apache2/access.log -P http://www.hide10.com -f /home/user01/public_html/visitors/index.html

logrotateの設定確認。必要なら変更する。

$ cat /etc/logrotate.d/apache2
/var/log/apache2/*.log {
        weekly
        missingok
        rotate 52
        compress
        delaycompress
        notifempty
        create 640 root adm
        sharedscripts
        postrotate
                if [ -f "`. /etc/apache2/envvars ; echo ${APACHE_PID_FILE:-/var/run/apache2.pid}`" ]; then
                        /etc/init.d/apache2 reload > /dev/null
                fi
        endscript
}

cron.dailyに登録。

$ sudo vi /etc/cron.daily/0_visitor
    file: 0_visitor
    #!/bin/sh

    visitors -GKZURDOBXYS -m 50 /var/log/apache2/access.log -P http://www.hide10.com -f /home/user01/public_html/visitors/index.html
$ sudo chmod 755 /etc/cron.daily/0_visitor

memcacheインストール

「WordPressを激速に! APC+memcacheで簡単最適化! | それでも地球はまわっている」を参考にmemcacheをインストールする。

$ sudo aptitude install php5-memcache php-apc memcached
$ sudo service apache2 restart

WordPress用プラグイン「WordPress › WP Memcached Manager « WordPress Plugins」をインストールし、「Server IP / Hostname: -> 127.0.0.1」、「Server Port: -> 11211」に接続して動作を確認する。

WordPressのSSH2接続

「WordPress: SSH2の暗号鍵を使った自動アップデートを有効にした – Hinemosu」を参考に、SSH2を使ったWordPressアップデートをセットアップする。

$ sudo aptitude install libssh2-ph
$ sudo service apache2 restart

wp-config.phpを編集し、WordPressのアップデート情報入力を省略する。

$ vi /home/user01/public_html/wp-config.php
    #file: wp-config.php
    define('FTP_PUBKEY','/home/user01/.ssh/id_rsa.pub');
    define('FTP_PRIKEY','/home/user01/.ssh/id_rsa');
    define('FTP_USER','user01');
    define('FTP_PASS','');
    define('FTP_HOST','localhost:xxxx');

ソーシャル投票システムの試作品

hide10 — Tue, 01 Feb 2011 01:50:51 +0000

Twitterやはてなブックマーク、facebookの「いいね」を利用する、ソーシャル投票システムの試作品を作ってみました。

マイとナナ、どちらかお好みの写真に対し、各ソーシャルメディアのボタンを押して投票して下さい。はてぶ/Twitter/fbのそれぞれに投票することで、一人最大3回まで投票可能です。

マイの写真

ナナの写真

WordPress: タグのRSSフィードを生成するコードを書いた

hide10 — Fri, 17 Dec 2010 01:05:16 +0000

WordPressの個別記事において、該当記事に付与されたタグのRSSフィードを生成するコードを書いたので公開します。

コード

サンプルコードは以下の通りです。下記コードを個別記事のHTMLヘッダ生成部に加えて下さい。

term_id);
			echo '' ;
		}
	}
?>

解説

「RSSフィードを生成するコード」と書きましたが、実際はWordPress本体が生成するフィードを呼び出すコードです。

記事中のタグリストを取得し、そのタグのタグフィードを呼び出し、HTMLヘッダにRSS情報として表示させます。

こうしておくと、個別記事の表示時にRSSの購読操作を行ったとき、通常のブログフィードやコメントフィードに加え、該当タグ専用の更新フィードもリストアップされるようになります。

例えばこの記事でフィードを検出すると、WordPressタグのフィードも表示されるはずですよ。

ウチみたいに記事種別が入り乱れるブログにおいて、ユーザーが「特定タグにヒモ付いた記事の更新だけ知りたい」なんて場合に便利な機能だと思います。

宜しければお試し下さい。

W3 Total Cache日本語版作成中

hide10 — Mon, 13 Dec 2010 07:39:16 +0000

WordPressの動作を軽くする、キャッシュ生成プラグイン「W3 Total Cache」(W3TC)の日本語化作業を始めました。

まだ一部ページの翻訳が終わっただけな状況ですが、同様な作業を行う方が現れて不要なバッティングなど起きぬよう、この場を借りまして「翻訳中」宣言を致します。

W3TC日本語化に到る背景や、現在の作業状況などは以下の通りです。

W3TCの日本語化に到る背景

W3TCは、一般的なページキャッシュに加え、データベースキャッシュやオブジェクトキャッシュ、CSS/JSの最適化やブラウザキャッシュ制御まで行える、非常に高機能なキャッシュプラグインです。

しかし、現在は英語版のみの公開となっており、加えて多機能さ故の設定項目の多さから、国内ユーザーで利用を敬遠する向きが見られたことも事実です。

ですが、こんなに高機能なプラグインが、国内で日の目を見ないのは実にモッタイない！

と言うことで、一念発起して翻訳作業を始めた次第です。

作業状況

現在の作業状況としては、「SourceForge.JP」に新規プロジェクト「W3 Total Cache日本語版」を申請し、そこにスペースをお借りして翻訳作業を行っています。

また日本語化（多言語化）作業を行っていることを原作者様に連絡し、現在作業内容などを整合中です。

作業の成果としては、設定画面のサイドメニューやヘッダー部、また全般設定画面・ブラウザキャッシュ設定画面・インストール方法の各タブまで翻訳を終えました。

現在の成果物をダウンロードできるようにしておきましたので、興味があるようでしたらお試し下さい。

使い方はWordPressの他プラグインと同様で、プラグインディレクトリに展開後、WordPressのプラグイン管理画面から有効化すれば動作するはずです。

サーバ環境によってうまく動かない場合もあると思いますが、その場合は出来る限りお手伝いいたしますので、コメント欄なりツイッターなりでご相談下さいませ。

それから、日本語版プラグインの不具合に関しては、原作者さんに文句を言わず、私に対して文句を言ってくださいね。

あと一緒に作業をして下さる方がいらっしゃいましたら、コミット権を付与しますのでSourceForge.JPのアカウントご連絡下さい。

WordPress: facebookの「いいね」に使われる画像を指定するコード書いた

hide10 — Mon, 06 Dec 2010 07:34:07 +0000

facebookの「いいね！」ボタンを押したとき、サムネイル画像として使われる画像を指定するWordPress用コードを書いたよ。

「いいね！」ボタン実装の詳細は他を当たってもらうとして、ここではサムネイル画像を指定するプロパティ「og:image」に限って説明します。

コードは個別記事(post)で記述することを前提としているので、インデックスやアーカイブで使用する際は、自分で一工夫して下さい。

機能説明

「いいね」ボタンを押したときに使われる画像は、「Open Graph protocol」の「og:image」プロパティで指定されます。

上記”IMAGE_URL”を適切に切り替えれば、個別記事でサムネイルとして使用される画像を指定できると言うことになります。

イメージ画像はPNG、JPEG及びGIFフォーマットが指定可能で、画像サイズは50x50px以上、画角は最大3:1までが推奨されるようです。

参考リンク：Open Graph protocol – Facebook開発者

手法１：アイキャッチ画像を指定する

WordPress2.9以降で採用されている、アイキャッチ画像（投稿サムネイル画像）をog:imageとして使用します。

WordPressの「画像を追加」機能を利用して画像を貼り付けているなら、この方法がスマートです。

以下のコードを、個別記事のヘッダ部でog:imageを指定している部分と置き換えてください。header.phpに全ヘッダを任せてる人は、is_single()辺りを使って切り分けてね。

ID)) {
	$tid = get_post_thumbnail_id($post->ID);
	$url = wp_get_attachment_image_src($tid);
	echo '';
} else {
	echo '';
} ; ?>

記事にサムネイル画像が指定されていない場合は、「DEFAULT_IMAGE」をサムネイル画像として指定します。

「DEFAULT_IMAGE」には適当なイメージ画像を指定するか、サイトのfavicon.icoを指定するなどしてください。

手法2：記事で最初に出現した画像を指定する

記事本文で最初に現れる画像タグ(img src=”hoge”)を抽出し、該当画像(hoge)をサムネイルとして指定します。

ウチのブログみたいに、画像をflickrに置いてるようなサイトは、この方法が向いていると思います。

以下のコードを、og:imageを記述している行と置き換えてください。

post_content;
$searchPattern = '//i';
if ( preg_match( $searchPattern, $str, $imgurl ) ) {
	echo '';
} else {
	echo '';
} ; ?>

画像のURLをブッコ抜く正規表現は良い感じに適当です。あんまり変なHTMLコードを書くと動かないから気をつけてね。

動作確認

コードの記述が終わったら「URLリンター」を使って動作を確認しましょう。

自分のサイトの個別記事URL（ex. http://www.hide10.com/archives/14680 ) を指定すると、そのページがfacebookからどの様に見えるのか確認出来ます。

ここで「情報 – Image」に表示される画像や、「Debug – Data Source」の内容を確認し、自分が意図したように動作しているか確認してください。

質問・要望・指摘事項など

質問・要望・指摘事項などなどあれば、コメント欄に書き込んで頂くか、ツイッター(@hideto)にご連絡ください。

ついでに、この記事の「いいね！」を押すのも忘れずにお願いします :smile:

新はてなブックマークボタンに対応しました

hide10 — Thu, 25 Nov 2010 06:48:02 +0000

新しい「はてなブックマークボタン」がリリースされたようなので、さっそくウチのブログでも対応してみました。

遠慮なくお試してくださって結構ですので、光の速さで「はてブ」すると良いよ。

設置方法メモ

新はてなブックマークボタンの設置方法をメモっておきます。

詳細な使い方は「使いやすくなりました! はてなブックマークボタン」を参照して貰うとして、WordPressの個別記事に貼り付けるなら、以下のようなコードを書けばいいと思います。

facebookやTwitterの公式コードと比べると、はてブボタンが一番「美しい」と思いました。こういうトコロはサスガだな～。

ボタン形状の変更

「data-hatena-bookmark-layout=”standard”」の”standard”部分を書き換えると、ボタン形状を変更することが出来ます。

はてブボタン形状例
ボタンタイプ	表示例
standard
vertical
simple

WordPress: W3 Total Cache(W3TC)のインストール方法和訳

hide10 — Fri, 12 Nov 2010 03:02:37 +0000

WordPress用のページ最適化プラグイン「W3 Total Cache」(W3TC)のインストール方法を和訳してみたよ。

英語が赤点だった人間の翻訳なので、期待せずに読んでください。

W3TCのインストール

wp-contentのパーミッションを755に変更します。例:
```
# chmod 755 /var/www/vhosts/domain.com/httpdocs/wp-content/
```
“General”タブを開き、ページキャッシュ、データベースキャッシュ、コード最適化(Minify)の設定を行います。多くの場合、ページキャッシュを”disk enhanced”に設定し、コード最適化(Minify)とデータベースキャッシュを”disk”にすると良いでしょう。
推奨: “Minify”タブは、あらかじめ推奨される設定になっています。ヘルプボタンを使うと、あなたのCSSとJSを簡単に見つけることが出来ます。JSを最適化する場合は、メソッドと位置に十分注意してください。詳細はプラグインのFAQを参照してください。
推奨:“Browser Cache”タブは、初期値でHTTP圧縮が有効になっています。目的によって、他のオプションも有効にしてください。
推奨: もし既にコンテンツデリパリーネットワーク（CDN）を使っているなら、 “Content Delivery Network”タブを開いて、フィールドのポピュレートと適切な設定を行ってください。メディアライブラリーを使っていないなら、デフォルト位置からのイメージなどのインポートが必要でしょう。「コンテンツデリバリーネットワーク」タブのメディア・ライブラリーインポートツールを使用して、この作業を実行してください。 CDNプロバイダーを使っていないなら、”Self-hosted”メソッドを使用することで、あなたのサイト性能を向上することが可能です。あなた自身のサーバに、サブドメインを作成しDNS ゾーンレコードとマッチさせてください。例えば「CDN」タブで、static.domain.comとFTP設定を構成してください。適切なファイルがFTPアップロードされることを確認するように、適切なアップロードボタンを使用してください。
オプション: “Database Cache”タブは、あらかじめ推奨される設定値になっています。もしあなたが共用ホストを利用しているなら、”disk”メソッドの利用に注意してください。そのようなケースではディスクの応答速度が十分ではなく、デフォルトでオプションが「無効」になります。
オプション: “Object Cache”タブでは、あらかじめ推奨値が設定されています。もし共用ホストを利用しているなら、 “disk”メソッドの利用には注意してください。そのようなケースではディスクの応答速度が十分ではなく、デフォルトでオプションが「無効」になります。データベースキャッシュのあるなしにかかわらずこのオプションをテストして、性能が向上するかを検討してください。
オプション: 携帯電話用テーマなどを使用しているなら、”User Agent Groups” タブで、ユーザエージェントの設定を行ってください。

その他の良くある質問に関しては、usageを参照してください。

対訳表

.poから上記部分を抜き出してみた。訳がおかしいところがあったら指摘してください。

原文	対訳
Set the permissions of wp-content/ back to 755, e.g.:	wp-contentのパーミッションを755に変更します。例:
On the \”General\” tab and select your caching methods for page, database and minify. In most cases, \”disk enhanced\” mode for page cache, \”disk\” mode for minify and \”disk\” mode for database caching are \”good\” settings.	\”一般\”タブを開き、ページキャッシュ、データベースキャッシュ、コード最適化(Minify)の設定を行います。多くの場合、ページキャッシュを\”disk enhanced\”に設定し、コード最適化(Minify)とデータベースキャッシュを\”disk\”にすると良いでしょう。
Recommended: On the \”Minify\” tab all of the recommended settings are preset. Use the help button to simplify discovery of your CSS and JS files and groups. Pay close attention to the method and location of your JS group embeddings.	推奨: \”最適化\”タブは、あらかじめ推奨される設定になっています。ヘルプボタンを使うと、あなたのCSSとJSを簡単に見つけることが出来ます。JSを最適化する場合は、メソッドと位置に十分注意してください。
See the plugin’s FAQ for more information on usage.	詳細はプラグインのFAQを参照してください。
Recommended: On the \”Browser Cache\” tab, HTTP compression is enabled by default. Make sure to enable other options to suit your goals.	推奨:\”ブラウザキャッシュ\”タブは、初期値でHTTP圧縮が有効になっています。目的によって、他のオプションも有効にしてください。
Recommended: If you already have a content delivery network (CDN) provider, proceed to the \”Content Delivery Network\” tab and populate the fields and set your preferences. If you do not use the Media Library, you will need to import your images etc into the default locations. Use the Media Library Import Tool on the \”Content Delivery Network\” tab to perform this task.	推奨: もし既にコンテンツデリパリーネットワーク（CDN）を使っているなら、 \”コンテンツデリパリーネットワーク\”タブを開いて、フィールドのポピュレートと適切な設定を行ってください。メディアライブラリーを使っていないなら、デフォルト位置からのイメージなどのインポートが必要でしょう。「コンテンツデリバリーネットワーク」タブのメディア・ライブラリーインポートツールを使用して、この作業を実行してください。
If you do not have a CDN provider, you can still improve your site’s performance using the \”Self-hosted\” method.	CDNプロバイダーを使っていないなら、\”Self-hosted\”メソッドを使用することで、あなたのサイト性能を向上することが可能です。
On your own server, create a subdomain and matching DNS Zone record; e.g. static.domain.com and configure FTP options on the \”Content Delivery Network\” tab accordingly. Be sure to FTP upload the appropriate files, using the available upload buttons.	あなた自身のサーバに、サブドメインを作成しDNS ゾーンレコードとマッチさせてください。例えば「CDN」タブで、static.domain.comとFTP設定を構成してください。適切なファイルがFTPアップロードされることを確認するように、適切なアップロードボタンを使用してください。
Optional: On the \”Database Cache\” tab the recommended settings are preset. If using a shared hosting account use the \”disk\” method with caution; in either of these cases the response time of the disk may not be fast enough, so this option is disabled by default.	オプション: \”データベースキャッシュ\”タブは、あらかじめ推奨される設定値になっています。もしあなたが共用ホストを利用しているなら、\”disk\”メソッドの利用に注意してください。そのようなケースではディスクの応答速度が十分ではなく、デフォルトでオプションが「無効」になります。
Optional: On the \”Object Cache\” tab the recommended settings are preset. If using a shared hosting account use the \”disk\” method with caution, the response time of the disk may not be fast enough, so this option is disabled by default. Test this option with and without database cache to ensure that it provides a performance increase.	オプション: \”オブジェクトキャッシュ\”タブでは、あらかじめ推奨値が設定されています。もし共用ホストを利用しているなら、 \”disk\”メソッドの利用には注意してください。そのようなケースではディスクの応答速度が十分ではなく、デフォルトでオプションが「無効」になります。データベースキャッシュのあるなしにかかわらずこのオプションをテストして、性能が向上するかを検討してください。
Optional: On the \”User Agent Groups\” tab, specify any user agents, like mobile phones if a mobile theme is used.	オプション: 携帯電話用テーマなどを使用しているなら、\”ユーザエージェントグループ\” タブで、ユーザエージェントの設定を行ってください。
Check out the FAQ for more details on usage.	その他の良くある質問に関しては、usageを参照してください。

WordPress: コード整形プラグイン SyntaxHighlighter Evolved 導入

hide10 — Fri, 05 Nov 2010 09:17:53 +0000

WordPressの記事中に表示するソースコードを、整形して見やすく表示するプラグイン「SyntaxHighlighter Evolved」を導入しました。

これまでは「iG:Syntax Hiliter 日本語版」を使っていたんだけど、まれにコードの整形に失敗する場合があり、これに嫌気が差して乗り換えることにしました。

「SyntaxHighlighter Evolved」を選択した理由は、ベースに使っているjsが「Google syntaxhighlighter」とメジャーな仕組みなコト、また整形後の見た目の綺麗さ、あとは他ブログでの使用数などを鑑み、「本流」と思われる「SyntaxHighlighter Evolved」を選択しました。

プラグインの導入に難しいことはなく、いつものようにダウンロードして、プラグインフォルダに展開して、有効化するだけ。

使い方も簡単で、コードの前後を［html］～［/html］なんて感じに囲うだけ。

で、実際の表示はこんな感じになります。

PHP Code Example

This line is highlighted.

This is an example of smart tabs.

WordPress

PRE表示にJSでCSSを被せるので、一瞬だけ素のコードが見えるけど、その後は非常に見やすいコードになっていると思います。

当たり前のようにHTML関連文字列は正規化してくれてるし、URLもクリッカブルだし、各種予約後は色つき表示だし、コード上にマウスをポイントするとソースコピペなんかのコマンドアイコンが出てきます。

各種言語にも広く対応しているし、行番号の有り無し、任意行数からのカウント、特定行のハイライト、行折り返しの有無なども簡単に指定可能な優れものです。

もしWordPressを使っていて、コードを綺麗に表示したいなら「SyntaxHighlighter Evolved」をオススメしておきますよ :-P

参考リンク：SyntaxHighlighter Evolved ≪ Viper007Bond.com

WordPress: SSH2の暗号鍵を使った自動アップデートを有効にした

hide10 — Tue, 02 Nov 2010 07:35:03 +0000

WordPressで本体やプラグインの自動アップデート機能を使おうとすると、「接続情報」画面が表示されちゃうコトがあるよね。

だけど、うちの「さくらのVPS + Ubuntu」な環境ではftpサーバを立ち上げていません。

はて、どうしたモンかと思ったので、色々と調べてみました。

SSH2のインストール

最初はFTPS(SSL)なサーバを立てれば良いのかと予想したんだけど、Ubuntuの師匠に相談したところ「libssh2-phpを入れるとSSH2が使えるようになるよ」と教えてもらえました。

さっそくlibssh2-phpをインストールします。

$ sudo apt-get install libssh2-php
$ sudo /etc/init.d/apache2 restart

これで接続情報画面にSSH2の選択肢が表示されるようになりました。

でもまだ問題が…

暗号鍵を使って接続

うちの管理画面は普通のhttp接続なので、上記「接続情報」画面でSSHパスワードを入力すると、一瞬とは言えネットワーク上にパスワードが流れてしまいます。

それはイヤだなーと思ったので、認証キーを使う方法を調べたところ「WordPress Tutorial: Using SSH to Install/Upgrade ≪ Fireside Media Development Blog」に、詳しい解説を発見。

詳細はリンク先を読んでもらうとして、要はWordPress用に暗号鍵を生成して、その情報を使えば良いみたいです。

コンソールコマンドだけ抜粋するとこんな感じ。

$ cd ~/
$ ssh-keygen
$ cd .ssh
$ cp id_rsa.pub authorized_keys
$ cd ~/
$ chmod 755 .ssh
$ chmod 644 .ssh/*

ssh-keygenでパスフレーズの入力を促されますが、なにも入力しないでください。

生成された暗号鍵のうち、「秘密鍵」である id_rsa は非常に重要なファイルです。このファイルを悪用すれば、あなたに成り代わってアクセス出来てしまいます。間違っても他人に取られることのないよう、厳重に管理して下さい。

ここまでで暗号鍵が生成されたので、実際に接続を試験します。

ホスト名を”localhost”、ユーザー名にSSH鍵を作ったユーザー名、パスワードは空、公開鍵・秘密鍵はさっき作ったid_rsa.pub/id_rsaを設定。

これで自動アップデートが出来ました！

接続情報の入力をスキップする

ここまででも十分に便利になったけど、接続情報の入力をスキップするよう設定して、クリックだけでインストール・アンインストールが出来るようにしておきます。

具体的にはwp-config.phpに、以下のような構文を追加します。各キーの詳細は「wp-config.php の編集 – WordPress Codex 日本語版」を参照してください。

define('FTP_PUBKEY','/home/user1/.ssh/id_rsa.pub');
define('FTP_PRIKEY','/home/user1/.ssh/id_rsa');
define('FTP_USER','user1');
define('FTP_PASS','');
define('FTP_HOST','localhost');

以上を設定後、プラグインのインストール・アンインストールを実行すると「接続情報」画面が表示されずに作業が継続されるはずです。ヤッター！

参考リンク：WordPress Tutorial: Using SSH to Install/Upgrade ≪ Fireside Media Development Blog
参考リンク：wp-config.php の編集 – WordPress Codex 日本語版

WordPress: カスタムフィールドによるテンプレート切り替え

hide10 — Mon, 01 Nov 2010 02:59:32 +0000

WordPressのテンプレートを工夫して、カスタムフィールドによって内容を変更するようにしてみたよ。

と言っても、そんなに難しいことでもなく、”post_custom”関数を使って処理を切り分けただけです。

カスタムフィールドによるテンプレートの切り替え方法

サンプルコードはこんな感じ。

具体的な手順としてはこんな感じ。

上記コードをテンプレート中の表示を切り替えたい場所に記述
処理1に通常表示、処理2に切替表示のコードを記述
「切替表示」を行いたい記事のカスタムフィールドに名前’foo’、値’1′を新規追加

こうすると、値 foo が「ない場合」は処理1が、「ある場合」は処理2が動き、表示が切り替えられるというわけです。

コード実例

もう少し具体的なサンプルとして、うちで使ってる実コードも掲載しておきます。

post_date_gmt );
    if ( $diff_time > ( 6 * 30 * 24 * 60 * 60 ) ) { ?>

上記コードは、カスタムフィールドに’noads’が無い場合、Google AdSenseの広告が表示されます。

反対に’noads’の定義がある場合、Amazonの「おまかせリンク」による商品リンクが表示されます。

‘noads’定義時の実例は「激ヤバ無修正の無料動画！」を、未定義時の実例は「「意味がわかると怖いコピペ」を解説するよ、その１」などを参照ください。ヘッダ付近の広告が、AdSenseとAmazonで切り替わっていることが確認出来るはずです。

ついでに言うと、上記コードには「WordPressの古い記事にのみ広告表示」とか、「AdSenseの「公共広告」を差し替える」などのテクニックが応用されています。

気になるヒトは下記のリンクもチェックしてみてね。

参考リンク：WordPressの古い記事にのみ広告表示 – Hinemosu
参考リンク：AdSenseの「公共広告」を差し替える – Hinemosu

WordPress: W3 Total Cache(W3TC)の高速化効果がスゴイ

hide10 — Thu, 28 Oct 2010 08:56:15 +0000

WordPressを最適化するプラグイン「W3 Total Cache」(W3TC)の高速化効果がスゴイ。

これまでは「WP Super Cache」と言うキャッシュプラグインを使ってたけど、「W3 Total Cache」の先進さに惚れて一発で乗り換えを決めました。

W3Tのスゴさを三行で説明

W3Tのスゴさを三行で説明します。

色々とキャッシュできる
コードの最適化も出来る
CDNの設定や、ブラウザキャッシュ制御まで出来る

以下ザックリと説明していきます。

色々とキャッシュできる

W3TCでは、一般的な「ページキャッシュ」以外にも、「データベースキャッシュ」や「オブジェクトキャッシュ」にも対応しています。

「データベースキャッシュ」を有効化すると、記事(post)やページ(page)、フィード(feed）の作成時間が短縮されます。

「オブジェクトキャッシュ」を有効化すると、その他の一般的な操作実行時間が短縮されます。

これらを全て有効化することにより、見ているヒトが快適になるだけではなく、サーバのCPU資源やメモリ資源の節約にもなります。

コードの最適化も出来る

コードの最適化(Minify)と言う機能が付いており、WordPressが生成するHTMLコードの最適化や、使用しているJavaScriptファイルの最適化、またブログテーマで使用しているCSSファイルの最適化まで可能になっています。

これにより転送ファイルのサイズや、転送すべきファイル数が削減できるので、WordPressの高速化に繋がります。

実際に当ページではJavaScriptファイルとCSSファイルが最適化された状態で提供されています。興味がある人は、HTMLソースを開いて先頭の3行目、4行目あたりを確認してみて下さい。

CDN設定、ブラウザキャッシュ制御

上記以外にもコンテンツデリバリネットワーク(CDN)の設定や、ブラウザキャッシュ制御のサポート機能まで備えています。

CDNは、大容量のアプリ・音楽・動画などを配信する際に利用する特別なネットワークのコトです。まだ余り一般的ではないと思いますが、Amazon.comが提供するCloudFrontを利用することが可能ですし、自前でCDNサーバを立てることにより、画像などを別サーバに振り分けるなんてコトが可能になります。

ブラウザキャッシュ制御では、Expires headerやSet pragma、Etag付与やgzip圧縮などの設定が可能です。

ktai styleやWP Touchと共存も可能

W3TCは「ktai style」や「WP Touch」などのプラグインと共存することも可能です。

ページキャッシュや最適化設定の詳細ページに「Rejected User Agents」と言う項目があります。

ここに携帯やiPhone/iPadのUAを設定すると、該当機器にはキャッシュしていない通常のページが表示されることになり、結果的に携帯用ページやiPhone用ページを表示することになります。

うちのブログではktai styleのWP Super Cache対応プラグインから抜き出した、以下のUAをセットしています。

DoCoMo/
J-PHONE/
J-EMULATOR/
Vodafone/
MOT-
MOTEMULATOR-
SoftBank/
emulator/
DDIPOCKET
WILLCOM
KDDI-
UP.Browser/
emobile/
Huawei/
IAC/
Nokia
Opera Mini
Opera Mobi
Palm OS
Windows CE
PlayStation Portable
SONY/COM
Nitro
Nintendo
mixi-mobile-converter/

まとめ

色々と出来るワリに設定が簡単で、しかも高速化効果も抜群です。

一度、W3TCを使いはじめると、WP Super Cacheが過去の遺物に思えるほどで、全てのWordPressユーザーに積極的にオススメします。

現在は英語メニューしかないのが難点ですが、そんなに難しい英語でもないので、チョコチョコと翻訳しながら読めば意味は分かると思います。

ぜひ一度お試し下さい。

参考リンク：WordPress : W3 Total Cache ≪ WordPress Plugins
参考リンク：WordPress Optimization | W3 Total Cache | W3 EDGE | Boston, MA

WordPress: ショートコードで本文にAdSense

hide10 — Wed, 27 Oct 2010 08:39:18 +0000

WordPressのショートコード機能を活用して、記事本文中の好きな位置にAdSenseを張れるようにしてみたよ。

動作サンプル

まずはショートコード機能を活用したAdSense呼び出しの動作サンプル。

こんな感じで、好きな位置にAdSenseを張れるようになりました。

やり方

お使いのWordPressテンプレートに含まれる functions.php ファイルに、以下のコードを追加します。

もし functions.php ファイルがなかったら、ファイルを新規に作成してね。

＜/script＞

';
}

add_shortcode('adsense', 'showads');
?>

上記コードに含まれる”google_ad_xxx”は、忘れずご自身のAdSenseコードに差し替えて下さい。

実際に記事本文でショートコードを呼び出す時は、［adsense］と言う呪文を書きます。イメージはこんな感じ。

記事を書くよ～。

［adsense］ 

ほげほげ～

“adsense”を括っている”[]“は、本当は半角です。上記の例では全角の”［］”にしてあるので、忘れず自分で置き換えてね。

これで［adsense］と書いた場所に、Google AdSenseの広告が表示されるはずです。

謝辞

この記事では、「WordPressのfunctions.phpに書いておくといいかもしれないコードいろいろ」の内容を参考にさせてもらいました。貴重な情報ありがとうございます。

リンク先では他にも有用なテクニックが多数紹介されてますので、ぜひご一読あれ。

参考リンク：ショートコード API – WordPress Codex 日本語版

さくらのVPS、Apacheチューニング

hide10 — Mon, 25 Oct 2010 08:44:51 +0000

興味のないヒトにはくどいでしょうが、本日も「さくらのVPS｜VPS（仮想専用サーバ）はさくらインターネット」にUbuntuでLAMP環境を構築し、その上でWordPressを動かすオハナシです。

なかなか安定運用に持って行けてませんが、http無応答時にコンソールを覗くと、Apacheさんが「Out of memory」を吐きまくっていることに気がつきました。

Out of memoryについて

まず「Out of memory」に付いて調べました。

linuxの初期設定では総メモリ容量（実メモリ＋Swap）以上の実効メモリ容量を要求された場合、実際には足りないのに大らかな気持ちで要求を受入れてしまうそうです。

結果として必要なメモリが足りない事態が発生した場合、適当なプロセスをkillしてしまうそうで、これを行うのが「Out Of Memory Killer」ことOOM Killerさんのお仕事で、OOM Killerさんが吐くエラーが「Out of memory」として表示されていたようです。

OOM Killer概要：
Out Of Memory Killerのこと。Linuxのデフォルトの動作では、プロセスがメモリを要求した場合、総メモリ使用量が実メモリ+swap以上であっても、ある程度許可するようになっている。これは、各プロセスが要求したメモリをすべて使うわけではないという経験的な法則により、できるだけ多くのプロセスを起動するためにそのように動作になっているようである。そのため、あるプロセスが確保できたはずのメモリを使おうとし、実際にメモリが足りない場合カーネルが適当なプロセスを選択し、そのプロセスをkillしてしまうことをOut Of Memory Killerという。

引用元：http://yochecks.blogspot.com/2007/04/oom-killer.html

Apacheのチューニング

OOMエラーを理解することにより、Apacheの「なにか」がメモリを浪費しているのでは無いか？というアタリを付けました。

なぜApacheさんがメモリを食いまくっているか？と言う根本的な理由は分からないですが、取りあえずの対策としてApacheの設定をチューニング。

/etc/apache2/apache2.confを開き、mpm_prefork_moduleの設定を以下のように変更しました。


    StartServers          5
    MinSpareServers       5
    MaxSpareServers      10
    MaxClients           34
    MaxRequestsPerChild  4000

一番大きく変更したのは「MaxClients」の値です。初期値では150になっていましたが、省メモリ環境での運用であることを踏まえ、34に制限してみました。これで良い変化があると良いんだけどな～。

Apacheのチューニングに付いては、『さくらのVPSのその後＠2010-10-25 | それでも地球はまわっている』や、『[Slicehost] OOM Killer(Out Of Memory Killer)の対策 – delab』を参考にしています。貴重な情報ありがとうございます。

WordPress: mixiチェックに対応した

hide10 — Sun, 12 Sep 2010 01:33:08 +0000

mixiの新サービス「mixiチェック」に対応しました。

個別記事ページの本文上、日付などが書かれている行の右端に「チェック」と書かれたボタンがあると思います。

このボタンを押すと、mixiでのアナタの「チェックリスト」に、ウチのブログが「チェック」されますので、遠慮せず2万回ぐらい押してみてください。

でもこれ、ぶっちゃけ誰も押してくれない気がするよ…ボタン名の「チェック」も気に入らない。「イイネ」のが意味の通りが良いと思うんだけどなぁ。

WordPress: 『読むための所要時間』を表示するコード書いた

hide10 — Fri, 30 Jul 2010 07:21:31 +0000

「たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法･･･ – IDEA*IDEA ～百式管理人のライフハックブログ」で紹介されていた、『読むための所要時間』を表示するコードをマルチバイト対応してみたよ。

使ってみたいヒトは、下記のコードをテンプレートの適当なところに貼り付けてください。

post_content; // wordpress users only
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 400);
$s = floor($word % 400 / (400 / 60));
$est = ($m == 0 ? '' : $m . '分') . ($s == 0 ? '' : $s . '秒') . 'ぐらい' ;
?>
この記事を読むのに必要な時間の目安:

上記コードでは1分間に読める文字数を400と仮定しています。気に入らなかったら、適当に増やしたり減らしたりしてみてください。

分単位で切り上げ表示を行うバージョンも作成しました。こちらの方がそれっぽいかな？

post_content; // wordpress users only
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 400) + 1 ;
$est = $m . '分ぐらい' ;
?>
この記事を読むのに必要な時間の目安:

注意点としては、本文中に誤ったHTMLコードがあると、「strip_tags関数」がガッツリタグを削除して「読む時間」がゼロ秒になったりします。「The W3C Markup Validation Service」あたりを利用して、正しいコードを書くように心がけてください。

元ネタ：Estimated reading time in web design
参考リンク：たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法･･･ – IDEA*IDEA ～百式管理人のライフハックブログ

Facebookの「いいね！」ボタンを付けてみた

hide10 — Fri, 23 Jul 2010 09:00:15 +0000

うちのブログにも、Facebookの「いいね！(Like)」ボタンを付けてみました。

本文直下にこんなの →（）があると思いますので、Facebookアカウントをお持ちの方は容赦なくクリックして頂けると幸いです。

多分に実験的な雰囲気を醸しだしておりますので、誰も押してくれないと拗ねて廃止するかも知れません。だからみんな秒速2万回ぐらい押しちゃってね！

「いいね！」ボタンの実装は、WordPress用プラグイン「Like」を利用しています。プラグインを有効化するだけボタンが設置できるので、気になるヒトは軽やかにお試ししてみるのもアリかもよ。

参考リンク：WordPress › Like « WordPress Plugins

WordPress 3.0: Commented entry listの動作不具合修正

hide10 — Sat, 26 Jun 2010 13:30:48 +0000

ブログソフトウェア「WordPress」のバージョンを3.0に上げたら、愛用していたプラグイン「Commented entry list」が動かなくなってしまったので、ソースを修正して対応したよ。

問題点

うちのブログのサイドバーには「最近のコメント」というのが表示されてるんだけど、ここは前述のプラグイン「Commented entry list」が表示している部分なのね。

ところがWordPress本体を3.0にアップデートしたら、最近のコメントとして「No Response」しか表示されなくなってしまいました。

原因調査

さっそく原因を調査したところ、「WordPress3.0リリース＆Commented entry listが動かなくなった場合の対処方法。 | ごみおきば」経由で、「WordPress 3.0 RC1 日本語版リリース ≪ REIMA’s Blog」に到達。

曰く、Commented entry listで「$tablecommentsと$tablepostsにテーブル名が入っていない」のが原因らしい。

解決方法

Commented entry listのソースを修正して、$tablecommentsと$tablepostsに正しい値が入るようにすれば良いみたい。

具体的にはget_recently_commented関数と、get_recently_trackbacked関数の先頭で変数定義を行っているので、この2ブロックを変更するようです。

元ソースはこんな感じ。

function get_recently_commented($limit = 10) {
global $wpdb, $tablecomments, $tableposts;
	:
	:
function get_recently_trackbacked($limit = 10) {
global $wpdb, $tablecomments, $tableposts;

上記2ブロックの関数先頭にある変数定義を、以下のように書き換えます。

function get_recently_commented($limit = 10) {
	global $wpdb;
	$tablecomments = $wpdb->comments;
	$tableposts = $wpdb->posts;
		:
		:
function get_recently_trackbacked($limit = 10) {
	global $wpdb;
	$tablecomments = $wpdb->comments;
	$tableposts = $wpdb->posts;

これで無事にプラグインが正常に動作するようになりました。良かった、良かった。

Twiiter用、はてブ用の大きめボタンを設置した

hide10 — Fri, 28 May 2010 11:32:33 +0000

ブログ記事の下部に、「twitterにつぶやくボタン」と「はてブする」機能を持つ、ワリと大きめのボタンを設置しました。

このボタンにより、当ブログは「iPad対応」を果たしたことを、ここに高らかに宣言します！

iPad対応？

イヤね、今日は世間的にはiPadの発売日じゃない？

いくらiPadが比較的大画面とは言え、これまでのブログ表示だと、リツイートもブックマークもボタンが小さすぎると思うんだよね。

で、思い切って180×80サイズの大きめボタンを作成。このボタンにより、今後世に溢れるであろうiPaderも楽々ボタンが押せるって寸法さ！

ボタンの作り方

バックアップの意味も込めて、ボタンの作り方をメモっておきます。

ボタン画像は『ボタン素材自動生成サイト – ButtonMaker』を利用させてもらいました。このサイトで、下記画像の通り設定すると、俺が使ってるTwitterボタン・はてブボタンと同じモノが生成されるはずです。

画像をクリックすると大きくなるよ。

作成した画像を適当なブログディレクトリに突っ込んだあと、下記のコードを single.php に記入して、ボタン設置の完了です。

">

普通のPHPとHTMLコードの組み合わせだから、適当に書き換えれば誰でも使えると思うよ。何か分からないことがあれば、お気軽にコメント欄などで質問してください。

ついでに↓のボタンを押してもらえると、俺がとっても喜ぶよ！

WordPress: コメントあるの？ないの？

hide10 — Tue, 27 Apr 2010 03:10:33 +0000

WordPressのハナシ。

発端は分からないんだけど、ふと気がつくとコメントの承認待ちが有るのか無いのか分からない変な状態になっていた。

「承認待ち(1)」と表示されるのに、「承認待ちのコメントはありません」ってどういうコト？なにかのキャッシュが腐ってるのかと思ったけど、ブラウザ変えたり環境変えたり1日待っても同じまま。

特段実害があるワケじゃないけど、なんだか気持ち悪くてイヤだなぁ…

と、ここまで書いてからピンと来た！「ゴミ箱」に入ってる記事が原因だ！

先日うっかり書きかけの記事を上げちゃって、その記事が自動でTwitterにポストされちゃって、さらに自動でTwitterコメントが記事に書き込まれたんだけど、そのコメントを処理せずに記事自体をゴミ箱に入れたんだよね。

で、承認待ちのコメントがあるんだけど、ゴミ箱にある記事だから記事一覧には表示されず、と言う状態になってたらしい。

解決策としては、ゴミ箱を空にして該当記事を削除すればオッケーだった。あースッキリした。

WordPress: トラックバック元のタイトルを短く表示する

hide10 — Thu, 01 Apr 2010 11:45:53 +0000

最近、徐々にトラックバックされることが増えてきたんだけど、その時にトラックバック元の表示が長くなりすぎるコトがあるのが気に入らなかったのよね。

例えば、直近の外部からのトラックバックタイトルは『それでも地球はまわっているブログ「それでも地球はまわっている」は、こんな内容を扱っています』なんだけど、これをそのままタイトルとして表示すると、長すぎて画面からハミ出てしまうわけです。

そこでちょっと細工して、タイトルが長すぎる場合は後半を[...]に差し替えて短く表示するようにしてみました。

トラックバック元のタイトルを短く表示する方法

トラックバック元のタイトルを短く表示するには、コメントやトラックバック元のリンクを取得する”get_comment_author_link”関数を改造して、引数に最大文字列長を取るようにします。

ただしWordPress本体のget_comment_author_link関数を改造してしまうと、WordPress本体のバージョンアップ時に上書きされちゃって悲しい思いをするので、テーマフォルダのfunctions.phpに独自関数を追加する手法を取ることにします。

独自関数の追加

現在使用しているテーマがあるフォルダの「functions.php」ファイルを開き、以下の関数を追加します。

< ?php function hideto_get_comment_author_link($abbr=0) {
	global $comment;
	$url    = get_comment_author_url();
	$author = get_comment_author();
	$author_org = $author;

	if ($abbr && mb_strlen($author) > $abbr) {
		$author = mb_substr($author, 0, $abbr);
		$author .= "...";
	}

	if ( empty( $url ) || 'http://' == $url )
		$return = $author;
	else
		$return = "$author";
	return apply_filters('get_comment_author_link', $return);
}
?>

呼び出し元修正

現在使用しているテーマの中から、トラックバック送信元を表示している箇所を探しだし、その部分を上記独自関数に置き換えます。

具体的には”get_comment_author_link”をgrepして、見つかったところを”hideto_get_comment_author_link”に書き換えればいいよ。

その際に、hideto_get_comment_author_linkの引数にタイトル表示文字列上限を指定すると、文字数が上限を超えている場合は以降の文字をカットして[...]に差し替えます。

要は get_comment_author_link() → hideto_get_comment_author_link(30) って感じね。

注意事項

コメントとピングバック・トラックバックを分離していないようなテーマだと、コメントしてくれた人の名前が上限以上の場合もカットされてしまいます。

まーそんなこと言っても、名前の文字数がダラダラ長いのは勘弁って気もするので、あんまり大きな問題にはならない気がするよ。

WP Super CacheとKtai Styleを併用する方法

hide10 — Fri, 05 Feb 2010 03:40:52 +0000

WP Super CacheとKtai Styleを併用する方法をメモっておくよ。

いつものようにブログのリファラーチェックをしていたら「CORESERVERとWP Super CacheとKtai Style」なるサイトからPingが飛んできていることに気がついた。

曰く、「CoreserverでWP Super CacheとKtai Styleを併用するのに苦労した」と言うことらしい。さいわい当ブログ経由で「WPtouchとWP Super Cacheを併用する || 新・ガジェット! gadget!! あーんど Mac!!!」に辿り着き、解決方法を見いだせた模様。

そんな流れの中、ウチのブログでも改めて「WP Super CacheとKtai Styleを併用する方法」をメモっておくね。

WP Super CacheとKtai Styleを併用する方法

まず最初に「WP Super Cache」の設定画面を開き、「WP Super Cache ステータス」ブロックにあるモバイル機器サポートをチェックする。

続いてそのまま下方に進み、「除外するユーザーエージェント」に以下の設定を追加する。

Android
DDIPOCKET
DoCoMo
Huawei
J-EMULATOR
J-PHONE
KDDI-
MOT-
MOTEMULATOR-
Nintendo
Nitro
Nokia
PDA
PalmOS
SL-
SONY/COM
SoftBank
UP.Browser
Vodafone
WILLCOM
emobile
emulator
iPhone
mixi-mobile-converter

以上で作業は終了です。

本当は「Opera Mini」とか「PlayStation Portable」も追加したいんだけど、空白を含む文字列を設定すると勝手に改行されちゃうので、うまく設定できませんでした。

参考までに記事執筆時のプラグインバージョンを記載。Ktai Styleのバージョンは2.0.0-beta2、WP Super Cacheはバージョン 0.9.8を使用しました。

WordPress「エラー：データベースに接続できません」をカスタマイズ！

hide10 — Thu, 14 Jan 2010 13:48:22 +0000

WordPressでデータベースに接続できない場合のエラー表示「エラー：データベースに接続できません」をカスタマイズしてみたよ。

最近、ブログへのアクセスが多く、ちょっと油断すると「エラー：データベースに接続できません」が表示されてしまう次第。キャッシュの設定を変えたり、表示自体を軽くしたりと試行錯誤はしてるけど、ちょっと油断すると落ちてしまいます。ごめんねごめんね～。

さてさて。落ちるのはサーバ側でなんとかするとして、見ている人に「エラー：データベースに接続できません」と表示するだけでは、何が起きているのか意味が通じないだろうし、味気ないことこの上ない。

そんなわけでWordPressのデータベース接続エラー画面をカスタマイズしてみました！

WordPress:DBエラーのカスタマイズ方法

“wp-content/db-error.php” を作って、エラーメッセージを書け。

おいらは「WordPress のデータベースエラーページをカスタマイズ : dogmap.jp」を参考にさせてもらい、こんな感じのファイルを作成しました。

< ?php
header( 'HTTP/1.1 503 Service Unavailable' );
header( 'Expires: Wed, 11 Jan 1984 05:00:00 GMT' );
header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . ' GMT' );
header( 'Cache-Control: no-cache, must-revalidate, max-age=0' );
header( 'Pragma: no-cache' );
header( 'Content-Type: text/html; charset=utf-8' );
?>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    
    データベースエラー : hide10.com


    503 Service Unavailable - DB Error
    Hinemosu のページを表示できません
    ただいまアクセスが集中しており、サーバのデータベースに接続できません。
    数分後にリロードしてください
    ご不便おかけしますが、よろしくお願いいたします。

出来たら見せたくないメッセージだけど、備えあれば憂いなし。色んなトコロに気を配っていきましょう！

WordPress: XreaからCoreserverへの移動移行変更引っ越し手順

hide10 — Wed, 13 Jan 2010 00:17:38 +0000

WordPressを利用していて、XreaからCoreserverへ移動／移行／引っ越しする際の手順をメモっておくよ。

XreaもCoreserverもサーバアカウント、データベースは作成済みで、且つ移行前後のドメイン名やDB設定は同一であることを仮定しています。要はホントの「サーバ引っ越し」ね。

「XreaからCoreserver」を想定してるけど、「XreaからXrea」や「CoreserverからCoreserver」でも同じ手順で出来ると思うよ。

旧サーバからDBをエクスポートする

WP-phpMyAdminを利用して、旧ブログからDBをエクスポートします。

WP-phpMyAdminの使い方は「WordPress: Xrea/CoreserverでのWP-phpMyAdminの使い方」を参照のこと。

各種ファイルをコピーする

旧サーバから新サーバにファイルをコピーします。

Xrea/Coreserverにはサーバ間コピーのツールが用意されているので、これを利用します。「旧サーバから新サーバ」なので、間違えずに新サーバで作業してください。ウッカリすると全ファイルが消えちゃうよ。

新サーバの管理画面から「サーバ間コピー」を選ぶ。
移転元となる旧サーバのFTP設定を入力。
リモート／ローカルディレクトリ共に”/”を入力してから「実行」を押す
コピーが終わるまでしばらく待つ。

コピーは数十分～数時間で終わります。のんびり待ちましょう。新サーバ側のルートにある「.servercopy.log」と言うファイルを確認して、最後の方に「COMPLETE」って行があれば終わってるハズです。

新サーバにWordPressをインストール

旧サーバから新サーバにファイルコピーしたことにより、新サーバではそのままWordPressのインストールが行える状態です。

新サーバの”/wp-admin/install.php”にアクセスし、WordPressのインストールを行ってください。インストール時に表示される自動生成のパスワードは、DBを復元するまで有効なので忘れずにメモします。

旧サーバとDB設定が異なる場合は、インストール前に新サーバ側のwp-config.phpを編集して下さい。

詳細は「WordPress | 日本語 ≫ インストール」を参照のこと。

新サーバにDBインポート

新サーバのWordPressにログインします。新サーバにインストールした時のユーザー名、パスワードなので勘違いしないこと。

プラグインもそっくりコピーされているので、WP-phpMyAdminを有効化し、WP-phpMyAdminのImportを使って、旧ブログのDBをインポートします。

これで旧ブログのユーザー名、パスワードに切り替わります。

DNS切り替え

DNSを切り替え新サーバに向けます。

Valuedomainのユーザーコントロールパネルから「DNSレコード/URL転送の変更」を選び、DNSを新サーバ側に切り替える。
2時間ぐらいしたら、新サーバ側の「ドメインウェブ」を開き、独自ドメインを使ったウェブの設定を行う。
DNSが新サーバ側に切り替わったら、旧サーバ側の「ドメインウェブ」を消去しておく。

直接は関係ないけど、ドメインメールの設定切り替えも忘れずにね。

動作確認

これで殆どの作業は完了です。

あとはプラグインを有効化し、各種動作に支障がないか確認してください。

一部のプラグインが書き込み権限で文句を言うかも知れないので、１つずつチェックした方が良いよ。

WordPress: Xrea/CoreserverでのWP-phpMyAdminの使い方

hide10 — Tue, 12 Jan 2010 22:22:15 +0000

WordPressの管理画面からデータベースを操作できるようになる「WP-phpMyAdmin」プラグインの使い方をメモっておくよ。

サーバ環境はXrea/Coreserverを想定していますが、PhpMyAdminのインストール方法以外はサーバに係わらず共通の手順だと思います。

PhpMyAdminのインストール

Xrea/Coreserverのサーバ管理画面、左サイドメニューから「ツール」画面を開く。
「ツール」画面下部にある「PhpMyAdmin自動インストール」の「インストール」ボタンを押す。

WP-phpMyAdminのインストールとDBバックアップ

「WordPress : WP-phpMyAdmin ≪ WordPress Plugins」からプラグインをダウンロードする。
zipファイルを展開後、WordPressのpluginフォルダにコピー。
WordPressの管理画面から「プラグイン」を開き、WP-phpMyAdminを有効化する。
WordPressの管理画面を開き、「ツール」の「PhpMyAdmin」を選択。
上段のタブ状メニューから「Export」を選択。
SQLを選択し、全てのデータを選択。
SQLオプションの”Structure”から、”Add DROP TABLE / DROP VIEW”、”Add AUTO_INCREMENT value”、”Enclose table and field names with backquotes”をチェック。
同様にSQLオプションの”Data”から、”Complete inserts”、”Extended inserts”、”Use hexadecimal for binary fields”をチェック。
最後に”Save as file”と”None”をチェックし、「GO」を押してファイル形式でエクスポートする

長々と書いたけど、Xrea/Coreserverなら”Add DROP TABLE”と”Save as file”をチェックすれば良いはず。

参考までにExport画面の「チェック後」の画像を載せておきます。クリックすると大きくなるよ。

WordPress:「トラックバック送信先」に送れない問題が解決した

hide10 — Fri, 08 Jan 2010 01:10:55 +0000

最近、WordPressの記事作成時、「トラックバック送信先」にURLを書いても送信されず、そのまま残る問題が発生していました。

「相手側の問題なのかなー？」と気になりながらも放置していましたが、アチコチ送ってるのに全く反映されず、これはどうやら自分側の問題だろうと判断し、解決方法を探してみました。

問題の原因

Googleさんにお伺いを立てたところ、「WordPress：トラックバックが出来ない！ – マゼランな航海」で似たような問題を発見。

曰く、sockopenのタイムアウトが「0.01秒」と極端に短く、重めのサーバだとタイムアウトして送信できないことがあるそうです。

うちはXrea/Coreserverという共用サーバで、お世辞にも軽いとは言えません。原因はこれじゃね！？

解決方法

wp-includeディレクトリにあるcron.phpを編集して、タイムアウト時間を長くします。

WordPress 2.9のソースでは、cron.phpの292行目、function spawn_cron()関数内の以下の箇所を修正します。

[PHP num=292]
wp_remote_post( $cron_url, array(‘timeout’ => 0.01, ‘blocking’ => false, ‘sslverify’ => apply_filters(‘https_local_ssl_verify’, true)) );
[/php]

この行の「’timeout’ => 0.01」を書き換えます。私は「’timeout’ => 30」で30秒に設定しました。

おまけ：wp-cronの動作

フラフラしていたら「hiromasa.another ≫ Blog Archive ≫ XREA & CORESERVER の cron と WordPress の wp-cron」という記事も発見。

曰く、WordPressとしての疑似cron動作はユーザからのアクセスをトリガにして、バックグラウンドで動作させるんだって。

なるほどなー

WordPress: oEmbedテスト第2弾、flickr編

hide10 — Thu, 24 Dec 2009 08:59:47 +0000

WordPressのoEmbedテスト第2弾、今度はflickr編です。上の画像は「http://www.flickr.com/photos/hide10/4208542002/」と一行書いただけ。そうすると画像が勝手にロードされるって寸法さ。

簡単に表示されるのは良いんだけど、画像サイズとかリンクとか表示位置が指定できないので、まだちょっと使いにくいかなー。「設定」の「メディア」で最大サイズは指定できるみたいだけど、これだけじゃオイラには機能不足だ。

閑話休題。ちょっと勘違いしてたんけど、WordPressがスゲエってよりもoEmbedってプロトコルがすごいんだね。oEmbedでサービス側にURLを投げると、埋め込み用のコードを返してくれるみたい。これはニコニコ動画にも対応して欲しいトコロ。

あと、まだ良く分かってないけど、JSONとかXMLで返って来るみたいだから、自分好みに整形することも出来そうな気がするな。WordPressが貼り付けようとするembedタグをフックするプラグインとかできるかな？暇を見て研究してみよう。

WordPress:2.9の新機能、簡単動画埋め込み（oEmbed）を試す

hide10 — Thu, 24 Dec 2009 06:13:06 +0000

WordPress2.9の新機能、簡単動画埋め込み（oEmbed）を試してみるよ。

上の動画は、ブログエディタ上では「http://www.youtube.com/watch?v=nTDNLUzjkpg」と「http://www.youtube.com/watch?v=dAtVzzxL0lU」の2行が書いてあるだけ。あとはWordPress側で勝手にembedタグを生成してくれます。カッコイー！

とは言え。残念ながらembedタグってXHTML validにならないのよね。自分で生成コードをカスタム出来れば良いんだけどなー。

参考リンク：WordPress | 日本語 » WordPress 2.9
参考リンク：Embeds « WordPress Codex

iPhone:ふるふるブックマーク対応！

hide10 — Thu, 10 Dec 2009 07:04:00 +0000

iPhoneを振ると「はてぶ」できちゃう新機能「ふるふるブックマーク」に対応したよ！

使い方は簡単！iPhoneでウチのブログにアクセスして、iPhoneを上下左右に思いっきり降るだけ！マラカスを振るように激しくiPhoneを振ってみてください。秒間30ふるふるを超えると自動的にブックマークされるよ！

これだけでブックマークできちゃうんだから、インド人もビックリだね！みんなもガンガンiPhoneを振り回して、ブックマークしまくってね！

正しい使い方は「”ふるふる”でブックマークしよう！はてなブックマーク for iPhoneリリース！ – はてな広報ブログ」をご覧下さい。

ブログ側の対応方法は「ふるふるブックマーク」に書いてあります。

参考リンク：”ふるふる”でブックマークしよう！はてなブックマーク for iPhoneリリース！ – はてな広報ブログ
参考リンク：ふるふるブックマーク

Google検索、ブログタグが「類似ページ」として表示された

hide10 — Wed, 09 Dec 2009 04:44:23 +0000

Googleで「フチコマタチコマ」を検索したら、うちのブログが上位に表示されてビックリしたんだけど、それ以上に驚いたのが「攻殻」タグのページが「類似ページ」として表示されたこと。

なんか言葉の説明だとシックリ来てない気がするけど、実際に検索してもらうか、上の画像を見ると何のことか分かるんじゃないかな？

個別の記事ページから「パンくずリスト」や「タグ一覧」でタグページへのナビゲーションを構築しているとは言え、Googleさんが自動で関連ページとして認識してくれるとは思ってなかったよ。Googleさんもスゴイし、うまいこと認識されるWordPressさんもスゴイなーと思いました。

まっとうなHTML、まっとうなデザインを心がけてた甲斐があったのかも知れないね。

WordPress: Topsy Widgets導入

hide10 — Tue, 01 Dec 2009 06:39:21 +0000

ブログ記事の「つぶやかれ数」を表示してくれるプラグイン「Topsy Widgets」を導入したよ。記事の右上辺りに「1 tweets」とか表示されてるのが「つぶやかれ数」ね。

そもそもの「Topsy」ってのは、Twitter上でつぶやかれたURLを観測して「今ホットなURLはなんじゃろかい？」ってのを見つけるTwitter専用の検索エンジンさんです。それ以外にも、例えばTopsyで “www.hide10.com”を検索すると、Twitter上に出てきたウチの記事を見つけられたりもします。

で、さらに一工夫して、記事の詳細アドレスで検索を掛けて、引っかかった数を自動で表示してくれるのが、「Topsy Widgets」プラグインってわけさ。

「つぶやかれ数」を表示する以外にも、Retweetボタンを付けてくれたり、TwitterでのURL引用記事をComment/Trackbackとして表示してくれたりと、中々に多機能なプラグインで良い感じ。

注意点として、URLの & を実体参照に変換してない箇所があるので、XHTML validにこだわる御仁はソースを書き換える必要があるみたい。プラグインの設定ページは実体参照で書かれてるので、中の人が知らないワケじゃなさそうなんだけど…気が向いたら、中の人にご注進してみようかな。

参考リンク：WordPress › Topsy Widgets « WordPress Plugins
参考リンク：Topsy – A search engine powered by tweets
参考リンク：Twitter検索エンジン、Topsyがローンチ―重要性の尺度はTwitterでReTweetされた回数

WordPress: Simple Tweet 導入

hide10 — Tue, 01 Dec 2009 06:13:34 +0000

WordPressの記事更新を検知して、自動でTwitterにつぶやいてくれるプラグイン「Simple Tweet」を導入したよ。

これまではtwitterfeedを使ってたんだけど、何だか「つぶやき漏れ」が見受けられるのよね。

これが何だか気になっちゃう感じなので、つぶやきプラグインとして評判の良い「Simple Tweet」を導入してみた次第。

と言うわけでこのエントリは、つぶやき更新が行われるかどうかのテストエントリでもあったりします。テステス。

参考リンク：WordPress › Simple Tweet « WordPress Plugins
参考リンク：WordPress Plugins/JSeries » Simple Tweet (Twitter ポスト)

WordPress: iPhone用テーマ「WPtouch」導入

hide10 — Wed, 11 Nov 2009 11:00:07 +0000

WordPressの表示をiPhone/iPod touch向けに最適化してくれるプラグイン「WPtouch」を導入したよ。

実はこれまでも「iWPhone」というプラグインでiPhone用テーマが表示されてたんだけど、iPhoneでアクセスすると強制的にiPhoneテーマに固定されて、標準デザインが見られないのが気に入らなかったのよね。

その点「WPtouch」なら、標準テーマへの切り替え機能が付いてるんだよね。全体的なデザインもこなれてるし、タグページやカテゴリページも表示できるし、ちょっと試用しただけでスグに気に入りました :D

導入はいつもの手順でOK。プラグインをダウンロードして、プラグインフォルダに展開して、プラグインを有効化するだけ。これだけで、あなたのブログがiPhone対応に！この番組をご覧の皆さまも今すぐお試し下さい！

参考までにこのページをiPhoneで見たときのイメージ画像を貼っておきます。

ね、カッコイイでしょ？

参考リンク：WPtouch: Mobile Plugin + Theme for WordPress ↔ BraveNewCode Inc.

WP Super Cacheとの併用

ただまぁ毎度のことながらキャッシュ表示とバッティングしちゃったので『WPtouchとWP Super Cacheを併用する || 新・ガジェット! gadget!! あーんど Mac!!!』を参考に対策を実施。

要はWP Super Cacheのモバイルサポートを有効にして、且つRejectUAとしてiPhoneを指定せよってことだね。

これでバッチリiPhone向けページが表示されるようになったので、iPhone使いの皆さまは試しに見てやってくれると嬉しく思います。ついでにAdMobを張ったのでiPhone用の広告も表示されるけどね :twisted:

参考リンク：WPtouchとWP Super Cacheを併用する || 新・ガジェット! gadget!! あーんど Mac!!!

iPhoneから更新

hide10 — Fri, 25 Sep 2009 13:51:56 +0000

iPhoneから更新するテストだよ

追記。うまく行ったみたい。iPhoneアプリにWordPressの管理ツールがあったので使ってみたよ。

この追記も含めて、iPhoneから作業しています。

参考リンク：WordPass

WordPress:タグのリンク/RSSフィードアドレスを取得する

hide10 — Fri, 21 Aug 2009 10:00:25 +0000

WordPressの個別記事画面（single.php)に、タグアーカイブのページアドレスと個別タグフィードのアドレスを表示させたよ。wp_tag_hogeとかで簡単に呼び出せるだろうとタカを括っていたのに、実は思った以上に大変な作業でした。

カギはget_tag_link関数とget_tag_feed_link関数

結論から言うと、タグアーカイブページのアドレスは”get_tag_link“関数、個別タグフィードのアドレスは”get_tag_feed_link”関数で取得可能です。

ただし、両関数とも引数にタグIDを渡さねばならず、加えて戻り値が文字列ではないので自前での画面表示が必要になります。

参考までにget_tag_feed_link関数はSimple Tagsのソースを追っかけていて見つけ、関数の使い方は『[覚書] 複数タグのアーカイブで、タグ情報一式を取得 | animal-taste.com』を参考にさせてもらいました。

サンプルコード

そこら辺を踏まえて、現在ウチのブログで使ってるコードはこんな感じですよ。注意：11行目の”” は先頭の’<’が日本語の’＜’になっています。このコードをそのまま使うなら、適宜’<’に書き換えてご使用下さい。

< ?php $posttags = get_the_tags();
	if ($posttags) {
		echo '' ;
		foreach ($posttags as $tag) {
			$tagLink = get_tag_link($tag->term_id) ;
			$tagFeed = get_tag_feed_link($tag->term_id);
			echo 'タグ：「'.$tag->name.'」に関する記事を一覧表示する' ;
			echo '' ;
			echo '' ;
		}
		echo '＜/ul>' ;
	}
?>

各行の説明を日本語で書くとこんな感じ。

get_the_tags関数で、現在表示しているページに定義づけられているタグ一覧を取得
タグ一覧は取れた？
ulタグ開始
タグ一覧を全部表示するまで↓の処理を何回でもやるよ、ここから
get_tag_link関数でタグアーカイブアドレスをゲット！
get_tag_feed_link関数でタグRSSのアドレスをゲット！
タグアーカイブアドレスのリンクを画面表示
タグRSSのアドレスを画面表示
liタグを閉じる
タグ一覧を全部表示するまで↑の処理を何回でもやるよ、ここまで
ulタグを閉じる
ここまでif文
ここまでPHP

おいらはsingle.php用に使ってるけど、必要なら他のアーカイブページからでも取得可能だと思います。実際の表示例は、この下の『よろしければ関連が高い他の投稿もお読み下さい』の下の方をご覧下さいませ。

WordPress:iPhone対応プラグイン『iWPhone』導入

hide10 — Tue, 28 Jul 2009 11:00:55 +0000

『iWPhone』なるWordPressプラグインを導入して、iPhone/iPod touch向けの表示画面を最適化してみたよ。iPhone/iPod touchをお持ちの皆さまは、試しにアクセスしてみていただけると幸い。

追記：その後「WPtouch」に乗り換えました。経緯などは『WordPress: iPhone用テーマ「WPtouch」導入 – Hinemosu』をお読み下さい[2009/11/11]

事の起こり

事の起こりは携帯端末ブラウザをシミュレートするFirefoxプラグイン「FireMobileSimulator」のバージョンアップついでに、ウチのブログがiPhoneでどう表示されるのかを確かめたのが始まり。ある程度は画面が崩れることを覚悟してたけど、予想を上回るグチャグチャなレイアウトで軽くショックを受けました。

携帯対応プラグイン「Ktai Style」を導入していたので、何からの対応をしてくれているのかと勝手な予想をしてたんだけど、iWPhoneなどの既存プラグインで対応可能なことを考慮して、Ktai StyleでのiPhone対応は行っていないんだってさ。

iWPhone導入手順

導入手順は公式のInstallationに書いてあるんだけど、英語なので簡単に翻訳しておきます。

zipファイルをダウンロードする
zipを展開して”iwphone-wordpress-plugin-and-theme”フォルダを取り出す
その中にある”iwphone.php”を、wp-content/plugins/ディレクトリにアップ
もうひとつの”iwphone-by-contentrobot”フォルダは、wp-content/themes/ディレクトリにアップ
管理画面のプラグイン設定を開いて、iWPhoneを有効化する
iPhone/iPod touchでアクセスすると専用にカスタマイズされたテーマで表示される

iWPhoneとWP-Cacheのバッティングを解決

これで無事にiPhone向け表示が出来るようになったんだけど、キャッシュプラグインのWP-Cacheがバッティングするみたい。iWPhoneは動的にテーマを切り替えるんだけど、これにキャッシュが加わって予期していない動作になる。

具体的にはPC用画面キャッシュがあればPCにもiPhoneにもPC向けを表示しちゃうし、iPhone向け画面キャッシュであればPCにもiPhoneにもiPhone向け画面を表示しちゃう。

解決方法を模索したところ、そのものズバリの解法を発見。まんまパクらせてもらいました。

iPhone View不調について | iPhone 3G Wiki blog

一応メモ。wp-content\wp-cache-config.phpに以下の記述を追加します。

$me_mobile_agents = array( 'iPhone', 'iPod' );

$ua = $_SERVER['HTTP_USER_AGENT'];
foreach ($me_mobile_agents as $a) {
	if (strpos($ua, $a) !== false) {
		$cache_enabled = false;
		$super_cache_enabled = false;
		break;
	}
}
$cache_rejected_user_agent = array_merge($cache_rejected_user_agent, $me_mobile_agents);

テーマファイルを改良

最後にテーマファイルを改良します。wp-content/themes/iwphone-by-contentrobotがiPhone用表示テーマなので、FireMobileSimulatorを活用しつつ良い感じに修正してください。

特にこだわらなければ初期表示でも問題ないと思うけど、header.phpの36行目だけは直した方が良いかも。以下、修正後のソース。

違いが分かりにくいともうけど、最後にスラッシュを付けてmetaタグの閉じ忘れを修正しています。

WordPress：おすすめプラグインの一覧

hide10 — Fri, 10 Jul 2009 08:00:14 +0000

いま現在愛用しているWordPressプラグインを紹介するよ。

特にオススメのプラグイン

特にオススメのプラグイン6選です。メジャーなプラグインばかりなので、プラグイン名で検索すれば、設置方法などが書かれた詳細記事が引っかかると思います。

Akismet: コメントSPAMの対策プラグインです。絶大な効果を発揮するので、SPAMが来る前に設定しておきましょう。
WordPress.com Stats: 公式のアクセス解析プラグインです。アクセス数、ページビュー、リファラーなどを表示します。
WP Multibyte Patch: WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。日本語トラックバックの文字化けなどが解決されます。日本語版WordPress本体に同梱されていますので、忘れずに有効化しておきましょう。
Google XML Sitemaps: 検索エンジン向けの地図である「Sitemaps」を作成してくれます。検索エンジン対策として、とても有効です。
Ktai Style: WordPressをケータイ対応にするプラグインです。ケータイ表示画面の完成度が高く、とてもオススメできます。
Simple Tags: WordPressのタグ管理機能を補完・強化します。そのうち本体に吸収されるんじゃないかと思うぐらい良く出来てます。オススメ。
関連記事：『Simple Tags導入 – Hinemosu』

その他のプラグイン

Add Image to Feed: WordPressのRSSフィードに、ロゴ画像のリンクを追加します。自作のプラグインです。
関連記事：『WordPress:RSSにロゴ画像を追加する – Hinemosu』
Commented entry list: 最近のコメントやトラックバックを、カスタマイズして表示します。
Custom Smilies: コメント欄にクリックで入力できる顔文字アイコンを表示します。
GalleryCSS Deleted: WordPress付属のギャラリー機能が出力するハードコーディングCSSを削除します。自作のプラグインです。
SyntaxHighlighter Evolved: ソースをハイライト表示してくれるプラグイン。iG:Syntax Hiliterからの乗り換えです。
Smart Update Pinger: WordPressの Ping 機能や更新通知機能を強化します。送信ログで失敗pingが見られるようになるので、Pingを活用するなら入れた方が良いよ。
Top Post: WordPress.com Statsで収集された「最近人気の記事」をサイドバーに表示します。WordPress.com Statsが必要です。
関連記事：『人気エントリを表示する『Top Post』プラグイン導入 – Hinemosu』
WordPress Database Backup: 簡単な操作でWordPressのデータベースをバックアップします。定期的にバックアップして、メールで送り付けるよう設定することもできます。
とても便利なプラグインですが、何故かウチの環境では動かなくなりました。データが多すぎる（1万2千件）とタイムアップしちゃうのかな？
wp-cache i18n: WordPressにキャッシュシステムを追加するプラグインの日本語版です。
関連記事：『WordPressキャッシュプラグイン『WP-Cache』を導入してみた – Hinemosu』
WP-PageNavi: 複数ページのナビゲーション表示を改善。Googleみたいな表示になります。
関連記事：『WordPress: WP-PageNavi導入 – Hinemosu』
WP-phpMyAdmin: WordPressの管理画面からphpMyAdminを操作できるようになります。バックアップにphpMyAdminを使っているならオススメです。
WP-PostViews: 各記事の閲覧数（ページビュー）を表示してくれます。

WordPress: WP-PageNavi導入

hide10 — Fri, 12 Jun 2009 07:48:57 +0000

WordPressのページ表示画面で、前後のページ番号を含んだリンクナビゲーションを実現してくれるプラグイン「WP-PageNavi」を導入したよ。導入にあたり「[ WordPress ] WP-PageNavi – ページ番号付きのページネートリンクを生成するプラグイン – WordPress 研究室」を参考にさせてもらいました。

実際の動作イメージはこんな感じ。ちょっとGoogleっぽいでしょ？

設置は簡単だったけど、好みの見た目にするためのCSS設定がタイヘンでした。バックアップとしてメモを置いておくね。

設置方法

「PHP « Programming « Portfolio | lesterchan.net」からプラグインをダウンロードして、プラグインフォルダに入れて有効化せよ。いつもと一緒だね。

動作設定

管理画面の「設定」→「PageNavi」を良い感じに設定します。細かな設定を書き写すのが面倒なのでキャプチャ画像を張っておきます。ページ番号総数を消して、「最初のページ」「最後のページ」「次へ」「前へ」の表示を変えて、ページの表示数を９にして、ページ数が多くても大ジャンプしないようにしたのかな。

表示設定

プラグインをインストールしたフォルダにある「pagenavi-css.css」を編集すると、見た目を変更することが出来ます。

最終的にはこんな感じ。表示位置を調整して、文字を大きくして、下線を引いて、色を変えて、間隔を詰めて、extend表示を非表示にしてあります。初期値とは大きく異なる箇所が多いので、参考程度にどうぞ。

.wp-pagenavi {
	padding: 0 2em ;
	font-size:118%;
	background-color:#FFE4E1;
	line-height: 2em ;
}

.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	text-decoration: none;
	border-bottom: 1px solid #F4A460;
}
.wp-pagenavi a:visited {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	text-decoration: none;
	border-bottom: 1px solid #F4A460;
}
.wp-pagenavi a:hover {
	border-bottom: 1px solid #F4A460;
	background-color:#F4F43D;
}
.wp-pagenavi a:active {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	text-decoration: none;
	border-bottom: 1px solid #F4A460;
}
.wp-pagenavi span.pages {
	padding: 2px 2px 2px 2px;
	margin: 2px 2px 2px 2px;
}
.wp-pagenavi span.current {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	font-weight: bold;
}
.wp-pagenavi span.extend {
	display:none;
}

テーマファイルの編集

最後にページナビゲーションを表示したい場所に、以下のコードを追加してください。

wp_pagenavi();

修正したファイルはindex.php、archive.php、category.php、search.php、tag.phpで、主コンテンツの上下にページナビゲーションを表示するようにしました。

あとは実動作を確認しつつ、見た目の表示を修正してみてください。

参考リンク：PHP « Programming « Portfolio | lesterchan.net[プラグイン本体]
参考リンク：[ WordPress ] WP-PageNavi – ページ番号付きのページネートリンクを生成するプラグイン – WordPress 研究室[設定例など]

WordPress:Twitterに投稿（TwitThis)ボタンを作成した

hide10 — Thu, 04 Jun 2009 05:28:56 +0000

WordPressの個別記事表示画面（single.php）に、「Twitterに投稿（TwitThis)」ボタンを付けてみたよ。

上にある各種アイコン群から、「Ｔ」と書かれたTwitterっぽいアイコンをクリックすると動作を確認できると思います。このページの宣伝を兼ねて、みんな遠慮なくクリックしまくると良いと思うよ！

作成したコードはこんな感じ。自分で書いておきながらなんだけど、PHPを良く理解していまま書いてるので、変なことをしていたらゴメンなさいね。

">

Twitterアイコンは「Social Media Mini Iconpack · Komodo Media」に公開されているアイコンセットを使わせていただきました。感謝！

WordPress管理画面のサイドバーをアイコン表示にする

hide10 — Thu, 30 Apr 2009 06:39:39 +0000

↓

！！！

WordPressの古い記事にのみ広告表示

hide10 — Mon, 27 Apr 2009 08:57:42 +0000

WordPressの古い記事にのみ広告を表示するようにしてみたよ。

single.phpに下記のコードを追加すると、半年以上前の古い記事のみ「広告表示」が行われます。カッコの中の数字は（6ヶ月ｘ30日ｘ24時間ｘ60分ｘ60秒）の意味なので、ここを良い感じに変更すると表示範囲を調整できます。

< ?php if ( time() - strtotime( $post->post_date_gmt ) > ( 6 * 30 * 24 * 60 * 60 ) ) { ?>
/*広告表示*/
< ?php } ;?>

参考にしたのは『WordPressをちょちょいと使いやすくする15のスニペット | コリス』にある「古いエントリーのコメント入力をクローズ」というテクニックです。リンク先では他にも便利なテクニックが紹介されているので、WordPressをお使いならご一読をお勧めします。

WordPressページで「前へ・次へ」(Prev/Next）リンクを実現する

hide10 — Mon, 27 Apr 2009 08:21:28 +0000

WordPressページで「前へ・次へ」(Prev/Next）のナビゲーションリンクを表示するプラグインを見つけたので、使い方も含めてメモっておきます。

そもそもWordPressの「投稿(post)」では、get_next_post関数やget_previous_post関数が用意されていて、簡単に「前へ・次へ」を表示できるのよ。だけど「ページ」に関しては、ナゼか前後を取得する方法が用意されていません。

でも「前へ・次へ」のナビゲーションリンクを用意してあげないと、複数ページを続け読みするのはとっても不便。そんなわけで頑張って前後へのリンクを自動生成する方法を模索したワケです。

「前へ・次へ」の取得

「前へ・次へ」のリンク取得は、earthman100氏作「Next-Previous Page」(Version:0.6)で実現できました。このプラグインは『オノケンノート ≫ 同じ親ページを持つ子ページ間でnext-page等のナビゲーションを表示するプラグイン[WORDPRESS]』経由の『WordPress : Support ≫ Prev/Next Page plugin? (wordpress Pages, not Posts)』で見つけました。

せっかくのGPLライセンスだし、ウチのサイトにも置いときます。

ダウンロード：NextPreviousPage.zip [1.47KB]

zipを展開して出てきたNextPreviousPage.phpをプラグインフォルダに入れ、プラグインを有効化することにより「next_page関数」と「previous_page関数」が使えるようになります。

ただし、おいらはプラグインとして使っておらず、該当関数をfunctions.phpに書き写して使ってます。深い理由はないんだけど、デザインに係わる機能なのでテンプレート側に記述した方が良いかな～とかそんな感じ。普通はプラグインで良いと思うよ。

Next-Previous Pageプラグインの使い方

/*使い方*/
< ?php next_page('orderby', 'link', 'before', 'after', 'title_attr', 'parent_id'); ?>
< ?php previous_page('orderby', 'link', 'before', 'after', 'title_attr', 'parent_id'); ?>

/*初期値*/
$orderby = 'post_date', $link='Previous/Next Page: %',
$before='', $after='', $title_attr='Previous/Next Page: %',
$parent_id = 0

/*実際の使用例*/

< ?php
$parentid = $post->post_parent;
previous_page('menu_order', '‹‹ %', '', '', '%', $parentid);
next_page('menu_order', '% ››', '', '', '%', $parentid);
?>

簡単なオプション解説。

orderby:ソート方法。‘post_date’ か ‘menu_order’ で日付順かメニュー順(ページ順)を選択。
link:リンク用文字列。%はページタイトルを表す。
before:リンクの前に付ける文字列。
after:リンクの後に付ける文字列。
title_attr:リンクタイトル。マウスオーバー時のツールチップ表示文字列だと思いねぇ。
parent_id:探索する親ページのID。「隣の隣」とか「親の親」を取得するときに活用するんだと思う。

「前へ・次へ」表示で一工夫

前述のプラグインを使用することにより、「前へ・次へ」が表示できようになりました。しかしウチのブログではulリストのli要素に「前へ・次へ」を割当てており、前後共にリンクのないページでli要素が消滅、HTML validにならない問題が発生しました。

これを解決するため、以下のようなコードを記述しました。

< ?php
    $parentid = $post->post_parent;
    $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
    if ($parentid | $children) {  ?>
        
        < ?php
            previous_page(~hoge~);
            next_page(~fuge~);
        ?>
        
< ?php } ; ?>

簡単に説明すると親IDか、子のページリスト、いずれかが取得できた場合にのみUL,LIのリスト表示を行います。これにより階層構造を持つページ群のみ、「前へ・次へ」が表示されるはずです。

実際の表示例

実際の表示例は『NTSCについて – Hinemosu』や『カタンの戦略 – Hinemosu』をご覧ください。

ページ右上、もしくは本文下にページナビゲーションを示すリンクが生成されていることが確認できると思います。

参考リンク：WordPress : Support ≫ Prev/Next Page plugin? (wordpress Pages, not Posts)
参考リンク：オノケンノート ≫ 同じ親ページを持つ子ページ間でnext-page等のナビゲーションを表示するプラグイン[WORDPRESS]

WordPressページで目次を自動生成する

hide10 — Fri, 24 Apr 2009 01:44:12 +0000

WordPressページで、目次を自動生成するするようにしてみたよ。

全てのページで目次が表示されるとウザイので、いま表示しているページに子ページ（サブページ）がある場合のみ、目次を生成・表示するようにしました。実際のコードはこんな感じです。

< ?php
    $children = wp_list_pages('title_li=&sort_column=menu_order&child_of='.$post->ID.'&echo=0') ;
    if( $children ) {
?>
    
        < ?php echo $children; ?>
    
< ?php
    } ;
?>

簡単に説明すると、wp_list_pages関数で、現在のページの子ページを取得し、子ページがあればULリスト形式で表示を行います。

上記コードの実際の表示例は『NTSCについて – Hinemosu』を参照してください。

応用例

「目次表示」でやってることは単純だけど、前提条件を工夫して親ページでのみ目次を表示すれば「グローバルナビゲーション→各項目表示時に関連タイトルを一覧表示」とかも出来そう。たぶんこんな感じ。

if (is_page() && !$post->post_parent) {(実行文)} ;

現在位置が「WordPressページ」で、且つ親ページを持っていない（サブページではない）場合にのみ「実行文」が処理されます。「実行文」で、サイドバーなどに目次表示を行えば、良くある企業っぽいサイトナビゲーションを構築できそうだ。

いやーWordPressは良く出来てるな。

参考リンク：Pages – WordPress Codex 日本語版
参考リンク：テンプレートタグ/wp list pages – WordPress Codex 日本語版

Hinemosu » WordPress

関連記事を表示する「The Slide by SimpleReach」サービスを導入しました

「The Slide by SimpleReach」とは

「The Slide by SimpleReach」の導入

コメントシステム「DISQUS」導入

Googleの「Page Speed Service」を使ってみた

Page Speed Serviceの導入

表示速度比較

画像圧縮比較

Ktai Styleはオフにした

トラックバックの受け付けを終了しました

トラックバックをオフにする方法まとめ

新規記事のトラックバックをオフに

既存記事のトラックバックをオフに

WordPressでサイトアドレス（URL）を間違えて設定しちゃった場合の対処方法

WordPress用MySQLクエリメモ

クエリの使い方

クエリ例

目的

どんなタグを使っているのか調べる

[DVD]を除いて再抽出

[CSS]タグを置き換える

クエリ例２

WordPress : wp-config.phpを移動した

WordPress: Jetpack をインストールした

Jetpackについて

さくらのVPS 1.5G、OS UbuntuでWordPressを動かす作業メモ

目次

申し込み

OS再インストール

LAMPセットアップ

SSHセットアップ

ntpセットアップ

MySQLセットアップ

mod_rewrite, mod_expires有効化

Apache設定変更

phpMyAdminのインストール

WordPress用データベースの作成

WordPress用データベースのインポート

WordPressのインストール

ロケールを ja_JP.UTF-8 にする

muninインストール

visitorsインストール

memcacheインストール

WordPressのSSH2接続

ソーシャル投票システムの試作品

マイの写真

ナナの写真

WordPress: タグのRSSフィードを生成するコードを書いた

コード

解説

W3 Total Cache日本語版作成中

W3TCの日本語化に到る背景

作業状況

WordPress: facebookの「いいね」に使われる画像を指定するコード書いた

機能説明

手法１：アイキャッチ画像を指定する

手法2：記事で最初に出現した画像を指定する

動作確認

質問・要望・指摘事項など

新はてなブックマークボタンに対応しました

設置方法メモ

ボタン形状の変更

WordPress: W3 Total Cache(W3TC)のインストール方法和訳

W3TCのインストール

対訳表

WordPress: コード整形プラグイン SyntaxHighlighter Evolved 導入

PHP Code Example

WordPress: SSH2の暗号鍵を使った自動アップデートを有効にした

SSH2のインストール

暗号鍵を使って接続

接続情報の入力をスキップする

WordPress: カスタムフィールドによるテンプレート切り替え

カスタムフィールドによるテンプレートの切り替え方法

コード実例

WordPress: W3 Total Cache(W3TC)の高速化効果がスゴイ

W3Tのスゴさを三行で説明

色々とキャッシュできる

コードの最適化も出来る

CDN設定、ブラウザキャッシュ制御

WordPress「エラー：データベースに接続できません」をカスタマイズ！