カテゴリー: WordPress

こんにちは。ちゃぼPです。

このサイトでは、WordPressテーマ「マテリアル」を使用しています。

先日より、トップページのデザインが大きく変わっていますが、カテゴリ別のサムネイル付き新着記事を三つ並べてみました。

先に最新の記事を大きく表示するようにしたのですが、

【WordPress】トップページで最新記事を大きく表示する方法

カテゴリ別は、目立たせたいカテゴリだけをピックアップして目立たせることを目的としました。

今日はその方法をご紹介します！

元々の要望は、部長ナビのページ

私ちゃぼPは、昨年末に部長ナビさんから「カテゴリ別の新着記事を表示したいんだよねー」と要望を貰いまして、いろいろと調べながらの作業でした。

【DIY】トップページにサムネ付きカテゴリ別新着記事を実装する・・・作業中（笑）

部長ナビのページはカテゴリーが多いので、６個のカテゴリーを表示するようにしています。ってか、本当は６個でも足りないくらいページ数が多いっすね。

http://nabi1080.com/management/wordpress/49875

私のサイトはページ数も少ないですから、三つにしています。

「loop.php」を編集する

まず、子テーマ内に、「loop.php」が存在しない場合は、子テーマ内にファイルをコピーしてから編集しましょう。

挿入するコードは、以下のようになります。

	<?php if ($paged <= 1): ?>

		<?php if ($counter <= 1): ?><!--　最初の記事判別　-->

			<!-- 新着カテゴリ1 -->
			<div class="cat_article1">

			<?php
			    $cat = 'pc';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/apps/wordpress/pc">PC</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(640, 480), array( 'alt' =>$title, 'title' => $title)); ?>

							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
							<p class="postcat1">最新記事</p>
							<span class="cat_text_area"><?php the_title(); ?></span>
							<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ2 -->
			<div class="cat_article2">

			<?php
			    $cat = 'iphone';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/apps/wordpress/iphone">iPhone</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(640, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
							<p class="postcat1">最新記事</p>
							<span class="cat_text_area"><?php the_title(); ?></span>
							<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ3 -->
			<div class="cat_article3">

			<?php
			    $cat = 'wordpress';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/apps/wordpress/wordpress">WordPress</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail('large', array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
							<p class="postcat1">最新記事</p>
							<span class="cat_text_area"><?php the_title(); ?></span>
							<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>
			
		<?php else:?>

			<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
			<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
			<div class="thumb-box sub-color-background">

			<?php if(has_post_thumbnail()){ ?>
				<a href="<?php the_permalink() ?>">
				<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>
				</a>
			<?php }else{ ?>
				<a href="<?php the_permalink() ?>" class="no-deco">
				<div class="no-thumbnail"><p>No thumbnail</p></div>
				</a>
			<?php } ?>

			</div><!-- .thumb-box -->
			<div class="post-info">
			<p class="up-date"><span class="lsf">time </span><?php
	the_time('Y/m/d') ?></p>
			<?php
			$days = 3;
			$today = date_i18n('U');
			$entry = get_the_modified_date('U');
			$news = date('U',($today - $entry)) / 86400 ;
			if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
			?>
			<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
			<?php get_template_part("sns_count") ?>
			<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
			</div><!-- .post-info -->
			</div><!-- .post -->
			<?php
			if($count==6){ ?>

			<?php }
			if($count%2==0){echo "<div class='clear2'></div>";}
			if($count%3==0){echo "<div class='clear3'></div>";}
			$count++;
			?>

		<?php endif;?><!--　/最初の記事判別　-->
		
	<?php else:?>

		<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
		<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
		<div class="thumb-box sub-color-background">

		<?php if(has_post_thumbnail()){ ?>
			<a href="<?php the_permalink() ?>">
			<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>
			</a>
		<?php }else{ ?>
			<a href="<?php the_permalink() ?>" class="no-deco">
			<div class="no-thumbnail"><p>No thumbnail</p></div>
			</a>
		<?php } ?>

		</div><!-- .thumb-box -->
		<div class="post-info">
		<p class="up-date"><span class="lsf">time </span><?php
the_time('Y/m/d') ?></p>
		<?php
		$days = 3;
		$today = date_i18n('U');
		$entry = get_the_modified_date('U');
		$news = date('U',($today - $entry)) / 86400 ;
		if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
		?>
		<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
		<?php get_template_part("sns_count") ?>
		<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
		</div><!-- .post-info -->
		</div><!-- .post -->
		<?php
		if($count==6){ ?>

		<?php }
		if($count%2==0){echo "<div class='clear2'></div>";}
		if($count%3==0){echo "<div class='clear3'></div>";}
		$count++;
		?>

	<?php endif; ?>

上の図のように、

• カテゴリスラッグ名
• カテゴリトップのURL
• カテゴリ表示名

を自分のサイトに合うように変更します。

スラッグ名は、「投稿」–「カテゴリー」から調べられます。

なお、上記の例では、ページネーション機能によるトップページのページ送り２ページ目以降では表示させないようにしています。

１ページ目

２ページ目以降

モバイルでは表示しない設定

モバイル表示ではこのボックスは表示しないようにします。

function.phpへのモバイル定義の記述がされていない場合は、以下のページを参考に記載を行います。

【WordPress】テーマ「マテリアル」のスマホ画面をスケルトンに！

先ほど挿入したコードを、下記の「ここに上のコードが入る」の部分に挿入します。

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

	<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
	<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
	<div class="thumb-box sub-color-background">
	<?php if(has_post_thumbnail()){ ?>
		<a href="<?php the_permalink() ?>">
		<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
		</a>
	<?php }else{ ?>
		<a href="<?php the_permalink() ?>" class="no-deco">
		<div class="no-thumbnail"><p>No thumbnail</p></div>
		</a>
	<?php } ?>
	</div><!-- .thumb-box -->
	<div class="post-info">
	<p class="up-date"><span class="lsf">time </span><?php the_time('Y/m/d') ?></p>
	<?php
	$days = 3;
	$today = date_i18n('U');
	$entry = get_the_modified_date('U');
	$news = date('U',($today - $entry)) / 86400 ;
	if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
	?>
	<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	<?php get_template_part("sns_count") ?>
	<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
	</div><!-- .post-info -->
	</div><!-- .post -->

	<?php
	if($count==6){ ?>
		
	<?php }
	if($count%2==0){echo "<div class='clear2'></div>";}
	if($count%3==0){echo "<div class='clear3'></div>";}
	$count++;
	?>

<?php else: ?>

ーーここに上のコードが入るーー

<?php endif; ?>

style.cssへ追記

次にstyle.cssへの追記です。

/* 最新のカテゴリ記事
--------------------------------------------------------- */
.cat_article1 {
	margin:0 5px 20px 0px;
	float: left;
	width: 32%;
}

.cat_article2 {
	margin:0 8px 20px 8px;
	float: left;
	width: 32%;
}

.cat_article3 {
	margin:0 0px 20px 5px;
	float: left;
	width: 32%;
}

.cat_article_thumb {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.cat_article1 .anchor {
  padding: 3px 5px;
  display: block;
  color: #fff;
  background: #333;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  *zoom: 1;
  text-align: center;
}

.cat_article1 .anchor:hover, .cat_article1 .anchor:active {
  text-decoration: underline;
}

.cat_article1 .anchor span {
  float: right;
  font-size: 9px;
  background: #fff;
  color: #333;
  padding: 5px 3px;
}

.cat_article1 .thumbnail {
  display: block;
  color: #333;
  background: #fff;
  text-decoration: none;
  line-height: 1.5;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  *zoom: 1;
}

.cat_article1 .thumbnail img {
  width: 100%;
  height: 150px;
  display: block;
}

.cat_article1 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}

.cat_article1 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.cat_article1 .thumbnail .title {
  padding: 3px;
  height: 70px;
}

.cat_article2 .anchor {
  padding: 3px 5px;
  display: block;
  color: #fff;
  background: #333;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  *zoom: 1;
  text-align: center;
}

.cat_article2 .anchor:hover, .cat_article2 .anchor:active {
  text-decoration: underline;
}

.cat_article2 .anchor span {
  float: right;
  font-size: 9px;
  background: #fff;
  color: #333;
  padding: 5px 3px;
}

.cat_article2 .thumbnail {
  display: block;
  color: #333;
  background: #fff;
  text-decoration: none;
  line-height: 1.5;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  *zoom: 1;
}

.cat_article2 .thumbnail img {
  width: 100%;
  height: 150px;
  display: block;
}

.cat_article2 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}

.cat_article2 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.cat_article2 .thumbnail .title {
  padding: 3px;
  height: 70px;
}

.cat_article3 .anchor {
  padding: 3px 5px;
  display: block;
  color: #fff;
  background: #333;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  *zoom: 1;
  text-align: center;
}

.cat_article3 .anchor:hover, .cat_article3 .anchor:active {
  text-decoration: underline;
}

.cat_article3 .anchor span {
  float: right;
  font-size: 9px;
  background: #fff;
  color: #333;
  padding: 5px 3px;
}

.cat_article3 .thumbnail {
  display: block;
  color: #333;
  background: #fff;
  text-decoration: none;
  line-height: 1.5;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  *zoom: 1;
}

.cat_article3 .thumbnail img {
  width: 100%;
  height: 150px;
  display: block;
}

.cat_article3 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}

.cat_article3 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.cat_article3 .thumbnail .title {
  padding: 3px;
  height: 70px;
}

.cat-update{
	font-size: 0.7em;
	position:absolute;
	top:0px;
	left:0px;
	color: #fff;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
}

.cat_text_area {
  padding: 4px 4px 0;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  color: #fff;
  font-weight: bold;
  overflow: hidden;
  height: 80px;
  line-height: 20px;
  font-size: 15px;
  text-decoration: none;
  background: rgba(3,3,3,0.6);
  background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(2,2,2,1.0)));
  background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(2,2,2,1.0));
  text-shadow: 0 0 5px rgba(0,0,0,1.0);
}

.postcat1 {
	position:absolute;
	top:0px;
	right:0px;
	background-color: #EA3382;
	border:1px solid #fff;
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 2px 15px 0;
}

/* ここまで

これで完成です。

上記の例はマテリアルでの実装例ですが、トップページを表示するテンプレートに記載すれば、特にマテリアルだけではなく実装できると思います。

カテゴリを目立たせたい方は、試してみてくださいね！

いつも使っているブログカード機能。
以前このような記事でご紹介したことがあるのですが、

見た目もとても綺麗で、助かっているのですが、一つ欠点があるんですね。

これは既にお気づきのかたも多いと思うのですが、

などでも触れられていますが、リファラ情報がすべてhatenablogになってしまって、自サイトから発リンクをしても、相手先に情報が伝わらないという仕様のようなんです。

実際私のサイトのアナリティクス情報を見ても、hatenablogからのアクセスが一定の数毎日あります。

これをなんとかしたいな～と思っていました。リンクを作成しても、相手先に伝えることが出来ないのは、何か勝手なことをしているようで気が引けてしまいますし、正直自分のサイトへの流入がどこからなのかを知りたいということもあります。

そこで今回、直接リンクを使ったブログカードを導入してみることにしました。

画像最適化なども行う「Celtispack」

そこで探したのがこちらのプラグイン「Celtispack」です。

ここから下のブログカードは、今回導入したCeltispackを利用して作成したブログカードです。

http://celtislab.net/wp_plugin_celtispack/

Celtispack自体はいくつかの機能を統合したパッケージになっています。

ざっと挙げるだけで、

• Thumbnail optimize 機能
• ultra help cache
• MO stop translate
• Unveil Lazyload
• Gallery Slider
• FitVids
• oEmbed extend
• Jetpack OGP Extended
• Scroll Page Top
• Code Prettify
• Post Branch Utility
• Disable Emoji
• Transient cleaner
• Post Widget Area
• Responsive AdSense Widget
• Recent posts Widget
• Related posts Widget
• Dynamic Tag Cloud
• Sharedaddy popular posts
• GA popular posts Widget

こんなにある（汗）

一つ一つの説明は本家サイトにお任せするとして、特筆すべき機能を抜粋して紹介します。

Thumbnail optimize 機能

Thumbnail optimize 機能については、とても便利な機能が満載。

• 拡張アイキャッチ機能
• サムネイルの再作成機能
• jpeg 画像の画質指定
• png画像のサムネイルを jpg形式へ変換する機能

なんていう素晴らしい機能がついてます。画像形式の変換機能に加えて、拡張アイキャッチでは挿入した動画や画像からアイキャッチを作ってしまうというのですからスゴイ！

詳しい機能についてはこちらを参考に

http://celtislab.net/archives/20150319/wp_thumbnail_optimize/

ちなみにまだ私は使いこなせていません^^;

これからじっくり使い込んでみたいと思います。

他にも、キャッシュ系のものや画像遅延読込の機能もありますが、必要ない機能はオフにも出来ます。
場合によっては既にインストールされているプラグインとバッティングしてしまうこともあるので注意が必要です。

あと、便利だなと感じるのが、

• 記事のコピーを作成して、編集が可能
• 公開中の記事を更新する際に、更新前の記事を公開したまま下書き保存して、予め指定した時間に予約更新も可能

ですね。使いようによっては、セール情報やキャンペーン情報の告知にも色々と使えるかもしれません。

直接リンクのブログカード

さて、今回の一番の目的のブログカード。きちんと相手先にリファラを伝える直接リンクの状態で、ブログカードを作れます。

ブログカードについては、こちらに詳しい説明があります。

http://celtislab.net/archives/20141225/blog-card-embed/

このプラグインを有効化してoEmbed extendにチェックを入れ、テキストエディター画面でリンクしたいURLを入れるだけ。なんとこれだけでOKです。

しかもビジュアルエディター画面でブログカードが表示される仕組みになっています。ユーザビリティスゴイですね・・

はてなブックマークの数こそ表示されませんが、すっきりしていい感じです。

これで理屈上リファラ情報もうまく伝わるはず。ちょっとしばらくこれを使っていこうと思っています。

先日、WordPressの記事中に表を入れる方法について、「TablePress」を紹介したのですが、表を入れるまでもないような単純なテキストボックスを入れたいときってありますよね。

紹介の記事はこちら

簡単に追加出来るサムネ付きテキストボックスを作る

私は昨日から川柳コーナーなんてわざわざ自分のハードルを上げるような真似をしてちょっと後悔しちゃっていたりするんですけど、その際にわざわざ表を挿入するのも大げさなので、こんなテキストボックスを作って入れることにしました。

簡単な　テキストボックス　作ったぞ

なにか、ちょっと強調したい文節や見出しがあれば、簡単にこのボックスにサムネイル入りで入れ込むことが出来ます。

サムネイルは別途用意していただいて、予めWordPress上にアップロードしておいて、画像のURLを調べておきます。

画像のURLの調べ方

「メディアの追加」からメディア一覧を表示します。

テキストボックス中のサムネイルとして表示したい画像をアップロードして、画像を選択した状態で、右側の「URL」に表示されている場所が画像のURLです。

推奨されるサムネイルのサイズは「100px　X　100px」です。

Chromeに「Create Link」を追加する

Chromeにプラグイン「Create Link」を追加します。

追加したら、画面の右上に「Create Link」のアイコンが表示されるので、クリックして「Configure」を選びます。

ポップアップした画面で以下のように入力します。

「Format」に入力するコードは以下を貼り付けます。

この際、先ほど調べたサムネイルのURLに修正してください。

<div class="imgtxt-box"><div class="imgtxt-image"><img style="border: none;" src="画像のURL" alt="" /></div><span class="imgtxt-body">%text%</span></div>

style.cssに追記

style.cssにclassを定義します。

下のコードをそのまま貼り付けてください。

.imgtxt-box{ 
	text-align: left;
	border: 1px solid #ccc;
	padding: 20px 0 10px 20px;
	background-color: #ffffff;
	line-height: Normal;
	margin: 0;
	overflow: hidden;
}
.imgtxt-image{
	float: left;
	margin: 0 15px 10px 0;
}
.imgtxt-body{
 	font-size:19px;  /* 文字の大きさ */
	display: table-cell;
	vertical-align: middle;
	height: 80px;
}

表示される文字の大きさは「19px」なので、変えたい場合は文字の大きさの部分を適宜変更してください。

これで準備は完了です。

実際に入れてみる

テキストボックスを表示させたい場所をにカーソルを合わせ、「表示させたい文字列」を記述します。

文字列を選択し右クリックなどでコンテキストを表示させ、「Create Link」から、先ほど名前をつけたものを選択します。

その後、選択した文字列はそのままの状態で、「貼り付け」を行います。

これで完成です。

ビジュアルモードにすると、

こんな風に見えてしまいますが、プレビューすると、

きちんと表示されていると思います。

需要があるかわからないですが、簡単なボックスがあればいいな～と思っていた方は使ってみてくださいね。

サラブロ川柳

高望み　しても伸びない　ページビュー