ワードプレスでブログを運営していると、突然ブログにアクセスできなることがあります。ブログにアクセス出来ないので、ウェブからでは何もできなくて、どうして良いのか戸惑います。
何故か今日も全くブログにアクセスできない状態になっていました。前回も同様になったことがあるので、前回の例を参考にして回復させました。それは、データーベースの保存と復元です。
Xrea Coreserver の管理画面に入って、データベースの操作画面で、データベースの保存をして、約3分後に復元をすると直りました。このようなことがあるから、私はブログが嫌いなのです。自分の管理外で何かわからないことが起こっている可能性があります。
ホームページではこのようなことはまずありません。ページの作成には少し難易度が上がりますが、全て自分の管理下にあります。
フェイスブックの デベロッパーズサイトのアプリ作成画面にアクセスします。この画面で、サイト名とURLを入力します。セキュリティチェックが済んだら、「Create an App」のアプリIDの作成完了画面が表示されます。このアプリID(app_id)を念の為メモしておきます。
フェイスブックの「いいね」ボタンの生成ページからコードを作成することができます。やり方はフェイスブックの「いいね」ボタンの設置の仕方を参照してください。iframe版を作成してください。
この時、設置するウェブページのURLを入力する と、次のようなアプリID(app_id)が入ったコードが生成されます。これをウェブページの表示させたい位置にコピーと貼付けするだけです。
<iframe src="//www.facebook.com/plugins/like.php?app_id=123456789012345&href=http//example.jp/&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
ワードプレスではURL部分をパーマリンク「<?php the_permalink(); ?>」にすれば、すべての記事で同じコードを使えます。
上記の方法では、allowTransparency=”true” の部分で、XHTML1.0ではW3C Markup Validation Service のチェックでエラーになります。
このエラーを回避するには、allowTransparency=”true” の部分を削除してやります。この部分はIE用で透過させるかどうかの設定です。これを削除すると、IEでは背景が白くなります。
最終的に、フェイスブックの「いいね」ボタンのコード(タグ)は次のようになりました。
<iframe src="http://www.facebook.com/plugins/like.php?app_id=123456789012345&href=<?php the_permalink(); ?>&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" title="Like button">Like button</iframe>
上記以外に変更したところは、「//www.facebook.com」の前に「http:」を追加しました。また、「title=”Like button”」を追加したのと、インラインフレームタグ間に「Like button」を追加したことです。これはHTML文法に忠実にする為です。もし、英語ページ等で「いいね」の表示を強制的に英語の「Like」にするには、「like.php?」の後に「locale=en_US&」を追加します。
最近の携帯電話では、外部CSSファイルを読み込んで表示するものもあるようです。実際にFORMAのi-modeで私のブログを見てみると、外部CSSを読み込んで表示されましたが、メイン部分に設定した margin が無効になり、サイドバーとメイン部分が重なって表示されていました。
携帯電話では、フルブラウザ以外のものはCSSが無効になると思っていましたが、CSSが無効にならないものもあるんですね。CSSを解釈してくれるのなら、ちゃんと全部解釈してほしいものです。
そこでブログのCSSファイルの一部に @media handheld{} を追加して、モバイルでもちゃんと表示できるようにしてみました。
@media handheld{
#menu {width:160px;position:relative;top:5px;left:5px;text-align:left}
a:link {color:#00f}
a:visited {color:#60c}
a:focus {color:red}
}
上記のようにサイドバーに相当する、#menu の position:absolute を position:relative に書き換えました。そうすると、サイド部分はメインの後に配置されます。これでサイド部分がメイン部分に重なるのは防げました。
また、CSSの a:hover はモバイルでは適用されないのでモバイル用の、a:focus も記述してみました。 a:link と a:visited もこの順番に必要です。
WordPressのブログに検索フォームを付けると、XHTMLで文法エラーを指摘されます。(http://validator.w3.org/)でチェックするとすぐにわかります。
これはフォームタグにrole属性がついているからです。このrole属性は特に必要ないので除去します。WordPress3.02-jaでも付いています。バージョンアップをしたら、修正の必要があります。
検索フォームにあるrole=”search”は、どこにあるのかすぐにはわかりません。私はTextSSを使って探しました。
該当箇所はWordPress3.02-jaの場合、/wp-includes/general-template.phpの160行目付近にあります。
$form = '<form role=”search” method="get" id="searchform" action="' . home_url( '/' ) . '" >
となっているので、role=”search” を消します。これでエラーは無くなりました。いつもチェックして文法エラーは無くしておきたいものです。
Powered by WordPress
