カテゴリー: トップページ

実はこれはやりたかった機能の一つです。
使用ブログ

WordPressには、jQuery(ジェイクエリー)というライブラリが用意されていますので、あらかじめこれを使う設定だけしておきます。

次に、CrossSlide サイトから「jquery.cross-slide.min.js」というファイルをダウンロードします。Download minified を右クリックして保存することができます。

このファイルは、Themeフォルダにアップロードします。

WordPressでは、「外観」→「ヘッダー」をクリックし、カスタムヘッダーの画像をアップロードしておきます。※画像は、Function.php で指定したサイズにします。
「ランダム」という項目をチェックします。ここをチェックしてある場合だけ、スライドショーにするようにします。
ループは1回に設定しました。 設定しないといつまでも動いています。

Function.php でJQueryの出力設定を指定します。

//jQueryの設定を出力
add_action('wp_head', 'myScript', 1);
function myScript() {
	wp_enqueue_script('jquery');

wp_enqueue_script('jquery.cross-slide.min.js', 
get_bloginfo('template_url') . '/jquery.cross-slide.min.js');
}

ヘッダーファイル（header.php）に、ヘッダー画像のURLを出力する設定をします。

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

<script>
  jQuery(function() {
    jQuery('#slideshow').crossSlide({
      sleep: 3,
      fade: 1,
	  loop: 1
    }, [
<?php $headers = get_uploaded_header_images(); ?>
<?php foreach ($headers as $key => $value): ?>
	{ src: '<?php echo $value['url']; ?>' },
<?php endforeach; ?>
    ])
  });
</script>

<div id="slideshow"></div>
<?php endif; ?>
<?php endif; ?>

投稿記事を開くと、右サイドに公開状態の設定があります。
「この投稿を先頭に固定表示」チェックボックスをオンにすると、いつでも記事を先頭に表示することができます。
先に読んでもらいたい記事があるときには、「おすすめ記事」としてトップに表示できます。
ここではトップへ持ってくる固定記事の役割をさせることにしました。

一般の記事と区別するためにスタイルを少し変えました。
「おすすめ記事」は、スタイルシートでアクセントをつけるとわかりやすくなります。
それと最新記事としても表示されてしまうため、「最新記事を表示しない」というタグをテンプレートに入れておきます。

画像をクリックしたときに表示される、専用ページテンプレートを作成しました。
今までは、ファイル名は自動で付けたものを使っていましたが、この専用ページでは画像ファイル名も表示するので、少しは考えてアップロードしようと思います(＾＾;

ということで早速テストです。

記事上の日付に、曜日を追加しました。
命令文が2つになってしまったのはダサいかも(^^;

<?php echo get_the_date(). get_the_date('(D)'); ?>

記事の下、投稿者名の右側に投稿時間を表示しました。

<?php the_time('(A h:i)'); ?>

カスタムフィールドを使って、タイトルの先頭にアイコンを表示してみました。
「固定ページにお天気アイコンをつける」というスクリプトを応用しました。
カスタムフィールドが表示されてない場合は、投稿画面から、表示オプションをクリックし、表示項目からカスタムフィールドを選びます。
「カスタムフィールドを追加」をクリックし、名前と値を入力します。

いちいち入力をするのが面倒だったらプラグインがあります。
これを使うと、選択するだけでアイコンを表示させることができます。
プラグインから、Custom Field Template で検索してインストールすることができます。

出力する場所（タイトルの前）に、スクリプトを書いておきます。
フィールドで入力する値と一致するように、イメージファイルを配列に入れておきます。
※CSSで回り込みの解除をしておかないと改行されてしまいます。微妙な配置位置などはCSSで調整します。

<!--カスタムフィールド用-->
<?php $tenkival = get_post_meta($post->ID, 'icon', true); ?>
<?php if($tenkival): ?>
<p class="tenki">
<?php $tenkipng = array(
	"flower" => "images/flower.gif",
	"knit" => "images/keitodama.gif",
	"outdoor" => "images/outdoor.gif",
	"music" => "images/piano.gif",
	"photo"  => "images/camera.gif",
	"pc" => "images/pc.gif",
	"food" => "images/cook.gif"
	); ?>
    <img src="<?php bloginfo('template_url'); ?>/<?php echo $tenkipng[$tenkival]; ?>"
    alt="<?php echo $tenkival; ?>" width="50" />
</p>