【wordpress】個別ページのカスタマイズ

◼︎フリーで利用できる画像を表示する
Flickrに著作者のクレジット表示という条件で利用できる画像がたくさんあるなんて知らなかった。。
「Photo Dropper」というプラグインで行けるらしい。著作者のクレジットも自動で追加される模様。

興味はないので次へ！

写真に枠つけたければstyle.cssで編集するのはもちろんだが編集画面でも同じデザインにしたければeditor-style.cssでも追加するのを忘れずに。

◼︎クリエイティブ・コモンズのライセンス
CCライセンスと呼ばれるもの。4つある。

表示

→クレジットを表示する

非営利

→営利目的での利用を禁止する

改変禁止

→改変を禁止する

継承

→オリジナルと同じCCライセンスで公開する。

◼︎複数の画像を横に並べて一覧表示する
ギャラリー機能を利用

functions.phpに

//ギャラリーのスタイルシートの出力を停止
add_filter('use_default_gallery_style', '__return_false');

style.cssに

/* ギャラリー */
.gallery-item {width: 33%;
	float: left;
	margin-top: 0;
	text-align: center}

.gallery img {border: solid 1px #aaaaaa;
	padding: 5px}

.gallery a:hover img	{background-color: #c4f254}

.gallery dd	{margin: 0;
	font-size: 0.75em}

.gallery br+br	{display: none}

あとは記事 > 画像の追加 > ギャラリーの設定で列数とか決めればok。
ギャラリー全体が

で囲まれ、

、

で記述されてる。 ◼︎記事ごとに1枚の画像を決まった位置に表示する 「アイキャッチ画像」の設定。 functions.phpに

//アイキャッチ画像
add_theme_support('post-thumbnails');
set_post_thumbnail_size(550, 400, true);

content.phpに

<?php the_post_thumbnail(); ?>

を追記。

◼︎カスタムフィールドに入力した付加情報を表示する
省略！。記事に天気の情報加えられるよ。

◼︎関連記事を表示する

<?php if(function_exists('related_posts')): ?>
<?php related_posts(); ?>
<?php endif; ?>

Yet Another Related Posts Pluginの利用をする。

<div class="related"></div>

で括ってデザイン変更すべし。

◼︎記事の個別ページのデザインをカスタマイズする
header.phpで

<?php if(!is_single()): ?>
<?php if(get_header_image()): ?>
<div id="image"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></div>
<?php endif; ?>
<?php endif; ?>

これでヘッダー画像が個別ページには表示されなくなる。

style.css

/* 記事の個別ページ */
.single div.post h2	{background-color:#333333;
	color: white}

.single div.post h2 a	{color: white}

これで見出しの背景色が変わる。

今のところ、記事の個別ページは4つのページテンプレート(header.php、content-single.php、sidebar.php、footer.php)を読み込み、single.phpで生成されている。single.phpとcontent-single.phpは個別ページの生成のみに使用されるため、ソースを変更しても他のページに影響することはないが、それ以外のテンプレートでは影響するので注意。

◼︎1つの記事を複数ページに分割する
content-single.phpに

<?php the_content(); ?>
//追加
<?php wp_link_pages('before=<p id="postpage">&after=</p>&pagelink=<span>%</span>'); ?>

style.cssに

/* 分割した記事へのリンク */
#postpage	{text-align: center;
	padding-top: 20px;
	clear: both}

#postpage a	{border: solid 1px #aaaaaa;
	padding: 5px 10px;
	margin: 0 10px}

#postpage a:hover	{background: #f7e29e}

#postpage span	{padding: 5px 10px;
	color: #888888;
	background: #dddddd}

#postpage a span	{padding: 0;
	color: black;
	background: none}

これで文が長い時に

ID,'full'); ?>