wordpress

どうも、うしねずみです。

WordPressのプラグインのLightbox 2が急に動かなくなりました。バージョンは2.8.2です。原因はWordpressのリッチテキストエディタでした。リッチテキストエディタで画像を挿入したり消したりを何度かすると、画像を挿入するタグがおかしくなります。

例えばあらかじめWordpressにアップロードしておいたhogehoge.jpgをメディアライブラリから挿入すると、リッチテキストエディタ（ビジュアルタブ）の方には画像が表示されます。この状態をHTMLタブの方で見ると、画像の部分には以下のコードがあります。

<a href="画像のアドレス"><img 各種プロパティ /></a>

ここでビジュアルタブの方に戻り、画像をクリックしてdeleteボタンで消します。その後再びHTMLタブに戻ると、該当コードが全部消えているかと思いきや、以下のコードだけが残ってしまいます。

<a href="画像のアドレス"></a>

この状態で再び同じ場所に画像を挿入すると、ビジュアルエディタの方では問題なく挿入出来たように見えますが、HTMLタブの方では以下のようになります。

<a href="画像のアドレス"><img 各種プロパティ /></a><a href="画像のアドレス"></a>

こうなってしまうと、プレビューした時や実際に記事を公開したときに、見た目は普通に画像が挿入されているのですが、画像をクリックしてもLightbox 2が機能しません。しかもこの現象は、上のように重複コードがある画像だけではなくて、その画像が含まれるエントリ全体に影響します（なぜだろう？）。つまり、同じエントリ内に一つでも重複コードを持つ画像があったら他の画像もLightbox 2がきかなくなるようです。

対策は簡単で、対象となる投稿記事の編集画面でHTMLタブの方を見て、画像を挿入しているタグを重複がないように書きなおします。つまり以下の部分だけ残して

<a href="画像のアドレス"><img 各種プロパティ></a>

以下のような部分は全部消します。

<a href="画像のアドレス"></a>

これで無事Lightboxが機能するようになりました☆

どうも、うしねずみです。

ブログを始めてから、Googleのウェブマスターツールにお世話になっています。Googleアカウントがあれば利用できて、自分のサイトがGoolgeからどのように見られているかが分かるのでとても役立ちます。例えば自分のサイトがどんな検索クエリで上位に来るのかとか、Googleのボットがクロールしに来た時のクロールエラーとか、サイトの作り方について参考になる情報が得られます。

私のブログではウェブマスターツールの「HTMLの候補」のタブで以下の二つの問題を指摘されていました。

• タイトルタグの重複
• 重複するメタデータ（descriptions）

つまり、「違うページなのに同じタイトルタグ（メタデータ）がついてるよ」ってことです。違うページにはちゃんと違うタイトル（メタデータ）をつけなさいってこと。タイトルタグの重複については、WordpressのプラグインであるAll in one SEO packが役に立ちます。このプラグインの設定で「Rewrite title」にチェックを入れてタイトルのテンプレートを指定しておけば、記事ごとに違ったタイトルを自動的につけてくれます。私もこれを使っていましたが、最近使い始めたwordpressのテーマであるwp.Vicunaでは最初からページごとに違うタイトルタグを付けるようになっていました（さすがです）。

ところが、もうひとつのdescriptionメタタグに関しては、wp.Vicunaでも対応していません。wp.Vicunaではdescriptionのメタタグは“header.php”で吐き出していますが、header.phpはどのページにも共通に読み込まれるので、記事ごとに違ったメタタグを付けることができません。ですのでここは自分で改造することにしました（違うテーマを使っている人は参考にならないかもしれませんが）。

まずheader.phpのdescriptionメタタグ部分をコメントアウトします。header.phpの26行目の以下の部分をコメントアウトして

<meta name="description" content="<?php bloginfo('description'); ?>" />

次のようになります。

<!-- <meta name="description" content="<?php bloginfo('description'); ?>" /> -->

このままだと全てのページでdescriptionメタタグが表示されない（コメントアウトしたから）ので、以下の７つのphpファイルにメタタグを出力する部分を書き加えていきます。

1. 404.php
2. archive.php
3. category.php
4. index.php
5. page.php
6. single.php
7. tag.php

それぞれのファイルの先頭付近にタイトルタグを出力している部分がありますので、その直前にdescriptionメタタグを付け加えていきます。別に直前じゃなくてもいいですが</head>よりは前に書く必要があります。

<?php get_header(); ?>
<title><?php vicuna_title(single_cat_title()); ?></title>

これはtag.phpの例ですが、付け加えるとこうなります↓

<?php get_header(); ?>
<meta name="description" content="<?php vicuna_title(single_cat_title()); ?>" />
<title><?php vicuna_title(single_cat_title()); ?></title>

wp.Vicunaではもともと各ページに違ったタイトルタグを付けるので、descriptionメタタグも同じものにしました。テーマによっては複数のページに同じタイトルタグをやdescriptionメタタグを付けるものもあるので、その場合は各ページで違ったものになるようにしてください。（記事のタイトルを含めるとか、「archive」、「category」といった文字を含めるとか）

これで無事、各ページに違うdescriptionメタタグが付くようになりました。
ところでGoogleに指摘されたからやってみたものの、SEO的にはどれぐらい効果があるんだろうか。。。

↓ぽちっと押してください。

どうも、うしねずみです。

まだブログを始めて10日ほどですが、テーマを変えることにしました。理由はカスタマイズに行き詰ったことです。もともとのテーマではメインカラムの幅が狭すぎると感じたので、メインカラムを可変幅にして、サイドバー（右）を固定幅にしようといろいろ試行錯誤してみたのですが、テーマ全体の構成が分かりづらく、どうしても要素同士の重なりをうまく思い通りにできませんでした。
ちなみに以前はこんなテーマでした。

 新しいテーマを色々物色しましたが、シンプルなものにしたかったのでwp.Vicuna Ext. Customというテーマに落ち着きました。これはwp.vicunaというテーマ（Movable Type版もあって有名らしい）を別の方が拡張して再配布しているもののようです。スキンはvegaにしました。しかしやっぱり細かい部分は調整したかったので、何箇所かカスタマイズを加えました。以下にまとめてみます。

メタ情報を表示しない

このテーマをそのまま使うと、ウィジェットで「メタ情報」をサイドバーに追加しなくても、デフォルトでメタ情報が表示されてしまうようです（RSSフィードもデフォルトで表示される）。メタ情報はサイト管理者以外には特に見える必要がないと思うのでこれを表示させないようにしました。

具体的には”（Wordpressをインストールしたディレクトリ）/wp-content/themes/wpVicunaExc-utf8/wp.vicuna.exc/”にsidebar.phpというファイルの63行目付近の以下のコードを以下の部分を丸ごとコメントアウトする。

<dt><?php _e('Meta', 'vicuna'); ?></dt>
  <dd>
   <ul>
    <li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Strict', 'vicuna'); ?>" rel="nofollow"><?php printf(__('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>', 'vicuna')); ?></a></li>
<?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
   </ul>
  </dd>

eye catchの変更

wp.Vicunaではページのレイアウトを簡単にいじれるようになっている。Eye catch（ブログの最上部にあるブログタイトルを含む大き目のヘッダ）を使おうと思ったのだが、デフォルトで用意されている画像が割と鮮やかな青を基調とした画像で、どうもブログの他の部分とのバランスが悪い。ということで自作。

“（Wordpressをインストールしたディレクトリ）/wp-content/themes/wpVicunaExc-utf8/wp.vicuna.exc/style-vega/images/eyecatch”にあるimage1.pngという画像を好きなものに差し替えると、実際にその画像がeyecatchとして使われる。

ということで（センスがいいかどうかは微妙だが）こういう感じになりました。

 

タグの区切り記号の変更

wp.Vicunaでは、各投稿記事について、「日付」、「カテゴリ」、「タグ」等の情報を表示させることができます。これらの要素は、縦棒記号” | “で区切られて表示されます。しかし、一つの記事にタグを複数つけた場合、タグ同士の区切りも同じ縦棒記号で表示されます。これは紛らわしい！ということで、タグ同士の区切り記号をコンマに変更します。

具体的には”（Wordpressをインストールしたディレクトリ）/wp-content/themes/wpVicunaExc-utf8/wp.vicuna.exc/script”にあるconfig.phpというファイルの287行目付近にあるvicuna_tag_diplayesという関数の
echo the_tags(‘<li>’, ‘ | ‘, ‘</li>’);
という部分を
echo the_tags(‘<li>’, ‘ , ‘, ‘</li>’);
に変更します。

すると、元はこんな感じだったのが

こんな感じになりました。

ブログタイトルの文字を大きくする

デフォルトでは若干ブログタイトルの文字が小さく感じたのでこれも大きくします。今度はスタイルファイルの方をいじります。

“（Wordpressをインストールしたディレクトリ）/wp-content/themes/wpVicunaExc-utf8/wp.vicuna.exc/script/style-vega”にあるcore.cssというファイルの231行目付近にある以下のコードのfont-sizeを好きなパーセントに書き換えます。

div#header p.siteName {
 margin: 25px 30px 10px;
 line-height: 1;
 font-size: 200%;
/* font-size: 144%;   */
 font-weight: bold;
}

いつもながら、無料でテーマとかプラグインとかを公開されている方々にはほんとに感謝です。
このテーマも少しずつカスタマイズしながら自分好みにして使い込んでいきたいと思います。

どうも、うしねずみです。

ブログを始めようと思ってレンタルサーバを探し、さくらインターネットに決めました。
以前レンタルサーバを探した時には「共有SSLがない」というのがネックになって対象外になったのですがどうやら今年の初めからさくらでも共有SSLサービスが始まったらしく、値段とスペックのバランスが良かったです。

さてさて、何しろブログは初めてなものでいろいろ調べてみるとどうやらWordpressというツールが一番人気なようです。ということで早速Wordpressをインストール。私は以前からセキュリティは気になるほうで（と言っても知識は少ないのですが）Wordpressでも管理画面をSSLで操作するためのAdmin SSLというプラグインを入れました。

ところが！！
のっけからトラブル発生。うごかない。。。
Admin SSLの説明では「プラグインを有効化するとすぐにhttps接続になるよ（再ログインが必要）」的なことが書いてあるのですが、ログイン画面にアクセスしてもブログのトップページにリダイレクトされます。

 仕方がないのでphpソースをちょっとのぞいてみる。
（最近たまーにphpを触る）
ソースをたどっていくと、どうやらAdmin SSLの設定画面の

1. The name of the HTTPS $_SERVER variable
2. The value of the HTTPS $_SERVER variable when HTTPS is ON

という二つの項目が関係しているらしい。
サーバとの接続がHTTPSかどうかを確かめるのにAdmin SSLが使っているようです。

例えば前者に“HTTPS”、後者に“on”等を設定した場合、phpのソース内でサーバ変数を見て

$_SERVER['HTTPS'] == 'on'

だったらHTTPS接続だと判断する、ということをしているようです。
そしてHTTPSではない場合は「ちゃんとHTTPSでアクセスしなさい」ってことでブログトップにリダイレクトされるらしい。

この値がちゃんと返ってきてるのか、さくらのサーバにテスト用のphpを書いてアップして確かめてみる。
phpのサーバ変数の中でhttpsに関係するのは以下の二つのようだ。

• HTTPS　　　・・・　https接続のときには空でない値が入る（通常は’on’が入る？）。
• SERVER_PORT　　　・・・　サーバが使っているポート番号。HTTPなら80番でHTTPSなら443番。

 この二つが見れればいいので次のように書けばよろし。

print( $_SERVER['HTTPS'] );
print( $_SERVER['SERVER_PORT'] );

このファイルをtest.phpとかにしてアップロードしてアクセスしてみる。
。。。だめ。
httpでアクセスしてもhttpsでアクセスしても、$_SERVER['HTTPS']は空のままだし$_SERVER['SERVER_PORT']は80番が返ってくる。
これではせっかくSSLが使えるのに使えない（＞＜） 

これ以上自分ではわからなかったのでさくらのサポートに問い合わせました。
「phpのソース内から接続がhttpsかどうかを知る方法ってないんですか？」
回答は以下のような感じ。

　「さくらのレンタルサーバ」にてご利用いただけます機能の一つに
Webアプリケーションファイアウォール(WAF)がございます。

　WAF機能はHTTPの環境変数についても対象としており、一部の値についてはフィ
ルタされます。ご了承ください。

　尚、こちらについては当面サーバ仕様を変更することがございませんため、
現状のままとなります。ご了承ください。

つまり、無理ってことです。

悪あがきをして、Admin SSLソース内のis_https()関数の戻り値が常にtrueになるように書き換えてみたけどムダでした。パスワード送信のときだけでもSSLで通信してくれないかなーと思って、ログインボタンのリンク先が

https://ほげほげ/blog/wp-login.php

になるように書き換えてみたけど、共有SSLだとSSLと非SSLでドメイン名が変わるので

（SSL） https://共有SSLサーバ/自分のドメイン名/blog/wp-login.php　→ドメイン名は「共有SSLサーバ」の部分
（非SSL）http://自分のドメイン名/blog/wp-login.php　→ドメイン名は「自分のドメイン名」の部分

Cookieを使ったphpのセッションがログイン処理後に引き継げなくてうまくいきませんでした。

誰か解決策わかる方いらしたら教えてください。