コンテンツへスキップ

2

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

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; ?>

コメントシステムに、DISQUS を導入しました。

DISQUSとは、Webサイト上にコメント投稿フォームを表示して、投稿されたコメントの管理を行うサービスです。
TwitterやFacebook、Google、Yahoo などのアカウントで投稿できます。
コメント欄に画像の挿入もできます。

Disqus Comment System プラグインを使いますが、インストールする前にDISQUSの利用登録が必要です。
Web上に多くの情報がありますので方法は省きます。
ここで登録した情報を、WordPress の設定画面で使います。

このままでは、画面の左いっぱいからコメントフォームが表示されてしまいますので、スタイルシートで少々デザインが必要です。
ちなみにここのデザインは下記のとおりです。

#disqus_thread{
	font-size: smaller;
	margin-top: 30px;
	padding-top: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #aaaaaa;
	margin-right: 10px;
	margin-left: 10px;
}

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

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

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

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

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

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

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

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

2

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

いちいち入力をするのが面倒だったらプラグインがあります。
これを使うと、選択するだけでアイコンを表示させることができます。
プラグインから、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>

コメント投稿フォームは、テンプレートタグ(comment_form())を使っているので、あまり細かい設定はできないが、味気ないので少しだけいじってみました。

コメント欄の角を丸めて、色を少し付けました。これだけでも結構かわいくなります。
カワイイにこだわりすぎだって?
まぁ、女の子ですからね(^^;

本当はかっこイイデザインをしたいのだけれど・・・

デザイン関係を少しいじりました。GIMPありがたいです。
だいぶブログらしくなったかしら?

  1. 投稿情報をトップに日付だけを置いて、記事下に「投稿者、カテゴリ、コメント」を置いた。
  2. 投稿情報のフォントを、0.75emに変更。
    本文サイズだと大きい感じがするので、spanタグで部分的に小さくした
  3. GIMPでナビのボタンを作成
  4. GIMPでサイドバーの見出しに使うラインを作成
  5. 番号付箇条書きのフォントサイズを少し小さくして見やすくした

WordPressには記事ごとに1枚の画像を「アイキャッチ画像」として指定することができます。
アイキャッチ画像を有効にするために、functions.php に次のタグを入力しました。

add_theme_support('post-thumbnails');
set_post_thumbnail_size(550, 400, true);

上記のタグを追加すると、新規投稿(投稿一覧)で記事の編集画面を開くと、「アイキャッチ画像」という項目が追加されます。

「アイキャッチ画像を設定」をクリックし、「アイキャッチ画像として使用」をクリックすると、指定したサイズで自動で生成されます。
アイキャッチをタイトルの下に表示するために、タイトルと記事の間に、次のようなテンプレートタグを入力しました。
このページのタイトル下の画像はアイキャッチ画像です。

<!--アイキャッチ画像-->
<?php the_post_thumbnail(); ?>