美川の山里暮らし

還暦を過ぎ、岡山県南西部の山間地で文明の利器を活用しながら田舎生活を満喫したいと思っています 日本蜜蜂の扇風行動の写真

PHPで画像をランダムに切り替えて表示する方法

Filed under: Home Page — タグ: , — daii @ 10:48 AM
2010年8月29日

ワードプレスやホームページのPHPで画像をランダムに切り替えて表示する方法を試行錯誤していましたら、うまく表示できるようになったので紹介します。

ページにアクセスする毎に画像ファイルが違ってなかなか良い感じになりました。

<?php
$rand_img[] = "<img src=\"http://hogehoge.jp/****/img1.jpg\" alt=\"img1の代替テキスト\" title=\"img1の説明\" />";
$rand_img[] = "<img src=\"http://hogehoge.jp/****/img2.jpg\" alt=\"img2の代替テキスト\" title=\"img2の説明\" />";
$rand_img[] = "<img src=\"http://hogehoge.jp/****/img3.jpg\" alt=\"img3の代替テキスト\" title=\"img3の説明\" />";
srand(microtime()*1000000);
$rand_num = rand(1, $n = count($rand_img));
$rand_num -= 1;
echo "$rand_img[$rand_num]";
?>

?このように画像ファイルを何個か用意して、2行目以降に羅列します。画像ファイルはhttpから記入しなくても、相対パスで記入してもOKです。altとtitleは無くてもけっこうです。必要に応じて記入します。

rand_imgとrand_numは別の好きな名前に変えてもOKです。

スポンサーリンク

WordPressで個別記事ページのh1タグを条件分岐変更する

Filed under: WordPress — タグ: , — daii @ 8:14 PM
2010年6月19日

WordPress初期設定でのh1,h2タグ

WordPressの初期設定では「ブログの名前」がh1タグに指定されており、「ブログの説明文」は見出しには指定されていません。そして、「個別記事のタイトル」がh2タグになっているのが普通です。これではSEOに有効とは言えません。

個別記事のh1タグに「個別記事のタイトル」を指定してみました

私はこれを個別記事以外はindex.phpを使って、h1タグに「ブログの説明文」を、h2タグに「個別記事のタイトル」を指定して、記事内部にh3タグ以下を指定していました。

個別記事では、h1タグに「個別記事のタイトル」を、h2タグには何も指定せず、記事内部にh3タグ以下を指定していました。これは個別記事にsingle.phpを使って実現していました。個別記事でh2タグを使わず飛ばしてh3タグになっていたのが気になっていました。

個別記事だけを指定するis_single()を使って条件分岐させました

今回これを、single.phpを使わず、header.phpだけを変更して、h1タグを条件分岐して変更する方法にしました。

最終的に、個別記事以外は、h1タグに「ブログの名前」+「ブログの説明文」を指定して、個別記事では、h1 タグに「個別記事のタイトル」+「ブログの名前」を指定しました。h2タグに「個別記事のタイトル」を指定して、記事内部にh3タグ以下を指定するのは従来通りです。これならSEOにはかなり有利なはずです。

条件分岐には

<?php if(is_single()): ?>

という個別記事だけを指定するis_single()というものを使いました。実際のスクリプトは次の通りです。

<h1>
<?php if(is_single()): ?>
<span class="storytitle_s"><?php the_title(); ?></span>
<span id="header_s"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></span>
<?php else: ?>
<span id="header"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></span>
<span class="description"><?php bloginfo('description') ?></span>
<?php endif; ?>
</h1>

ここで、h1タグの中にはブロック要素のdivタグを使うことができないので、インライン要素のspanタグを使ってブロック表示をさせています。single.phpは必要なく、とてもスマートにできました。表示がかなり乱れますのでスタイルシートで調整します。

classの表示が一部抜けている場合があります。上記のスクリプトは参考程度にしてください。ご了承ください。

WordPressでメール投稿を設定する方法(Ktai Entryを使用)

Filed under: WordPress — タグ: , , , , — daii @ 6:11 PM
2010年6月18日

Ktai Entry とは

携帯電話のメールで簡単、高機能にWordPressブログに投稿できるようにしたプラグインです。画像を添付したメールや、絵文字にも対応しています。秘密の投稿専用メールボックスに定期的にアクセスして新着メールがあれば取り込みます。投稿処理は各種の方法に対応しています。PHP5以上が必要です。

Ktai Entry の使い方(インストールと設定)

あらかじめ誰にも知られていない投稿専用のメールアドレスを準備します。できれば、独自のドメインで作った方が良いでしょう。宣伝やプロバイダの案内のようなメールが来ないアドレスにします。

Ktai Entry の配布元より、Ktai Entry をダウンロードします。(ktai_entry0811.tar.bz2)
解凍すると「ktai_entry」というフォルダに展開されるので、フォルダごとwp-content/plugins フォルダにアップロードします。(必要ないファイルもあります)

次に自分の WordPress にログインして、管理画面から新規にユーザーを作り、メールアドレスの箇所に携帯電話のメールアドレスを入力します。また、メール送信後すぐ公開したい場合は、権限を「作成者」以上にします。

「プラグイン」の画面で、「Ktai Entry」を有効化します。

「設定」→「投稿設定」→「メールでの投稿」で、メールサーバー、ポート、ログイン名、パスワードを入力します。

「設定」→「Ktai Entry オプション」で、各種設定をします。「POP3 読み込み間隔」は、サーバーに負荷がかかるので、15分以上にします。

「投稿受付メールアドレス」は設定しなくても使えますが、宛先 (To フィールド) がこのアドレスでないメールは拒否してくれるので設定した方が良いでしょう。

「投稿に挿入する画像サイズ」は、私は「中サイズ」を選びました。「投稿テンプレート」は添付画像がある時に使用されるので、使っているテーマのスタイルシートに指定されている画像の左寄せを style=”alignleft” と設定しました。こうすればスタイルシートは変更しないで済みます。

これらの設定が終わったら、携帯電話から秘密のメールアドレスにメールを送ってみましょう。15分程度待ってから、パソコンでブログにアクセスすると投稿が確認できるはずです。携帯電話でアクセスすると投稿されていないこともあります。これはパソコンでないとスタイルシートが読み込まれないから投稿されないようになっています。でも、他の誰かが先にパソコンでアクセスすると投稿が確認できます。

セキュリティの観点からルートの wp-mail.php は別の名前にリネームしておきましょう。

Xrea やCoreserver の場合のPHP動作の注意事項

Xrea やCoreserver のサーバーの場合は画像を投稿するとエラーになって画像が投稿できないと思います。その場合は、wp-content/plugins/ktai_entry のフォルダーに

AddHandler application/x-httpd-phpcgi .php

と書いた.htaccess ファイルを置いてください。

Xrea やCoreserver のサーバーの場合はPHPはセーフモードが有効となっていて、ユーザー名が自分ではないなどの制限があります。PHPをCGIとして動作させるとその制限がなくなるようです。

スポンサーリンク

DOCTYPEより前にコメントを書くとIEで互換モードになります

Filed under: Home Page — タグ: , , — daii @ 6:40 AM
2010年6月15日

昨日、このブログがIE(インターネットエクスプローラー)だけでMax-width の動作がおかしいのに気がつきました。つまり、IE7,IE8でMax-widthが働いていないのです。Firefox と Opera は問題ありませんでした。

スタイルシートのmax-width 付近の記述が間違っているのかと色々やってみましたが全く変わりません。私のホームページの方はうまく表示されているので、該当部分のスタイルシートをコピーしてみましたが変わりません。

ブラウザでソースを表示させてみて、あるいは先頭のコメントかと思い、これを削除したらあっさり直りました。

<!-- begin header -->

ネットで検索してみると次のような記述がありました。

XML 宣言の後に HTML コメントが挿入されている場合、Internet Explorer 8 標準モードとして表示されない

私の場合はコメントがXML 宣言の前でしたのでこの記述は間違っています。XHTML1.0の標準モードに設定しています。

<!-- begin header -->
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

「DOCTYPEより前にコメントを書くとIEで互換モード(Quirks モード)になる」のだと思います。

XML 宣言の後に HTML コメントが挿入されている場合、Internet Explorer 8 標準モードとして表示されない

何時間もこの問題にはまってしまいました。IEはなんとかして欲しいですね。

標準モードと互換モードについて

« Newer PostsOlder Posts »

Powered by WordPress