【wordpress】カテゴリごとの記事一覧自動取得

引用:カテゴリごとの記事の一覧をトップページに羅列したい

いまのとこ使わないけど覚書φ(-ω-)カキカキ

<?php
$categories = get_categories();
foreach($categories as $category) :
  echo '<h5>' . $category->cat_name . '</h5><ul>';
  query_posts('showposts=5&cat=' . $category->cat_ID);
    while(have_posts()) :
      the_post();
      echo '<li>' . get_the_title() . '</li>';
    endwhile;
  wp_reset_query();
  echo '</ul>';
endforeach;
?>

【SASS】【CSS3】画像にscaleを使ってホバーアニメーション

一個前の記事のオマケみたいなもの
これも今日のコーディングで作ったのでついでに載せとこうかなと
一個前の記事内 「@mixin anime」使ってます。

動きはあらかじめ拡大画像を表示させておき、ホバーすると標準サイズの画像に縮小するって感じです。

SASS


@mixin imgscale($scale-x : 1,$scale-y:1){
    -webkit-transform: scale($scale-x,$scale-y);
    -moz-transform: scale($scale-x,$scale-y);
    -o-transform: scale($scale-x,$scale-y);
    -ms-transform: scale($scale-x,$scale-y);
    transform: scale($scale-x,$scale-y);
}

			a {
				img {
					@include imgscale(1.1,1.1);
					@include anime;
				}
			a:hover {
				img {
					@include imgscale(1,1);
					@include anime;
				}
			}

配布されてるmixin使うのが手っ取り早いのでしょうが、人の作ったやつってどうも苦手で自分用のを作らないとダメな性分^▽^;

【SASS】【CSS3】ハンバーガーボタンに動きをつける

ハンバーガーメニューで動きのあるものを見つけて、これいいなぁと思ってたので、ちょうど今日コーディング依頼があったのでサクっと作ってみました。つっても全部SASSです。例のごとくsampleなどは面倒なのでないです。そのうち、このブログにも反映させとうかなー。できたてほっかほかですよー。(byライスの人)

動きとしては、クリックすると2個目の棒線が消え、1個目・3個目の線が斜めにアニメーションするようになっています。

SASS

@mixin anime {
    -moz-transition: -moz-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    transition: transform 0.1s linear;
}
@mixin rotate($rotate : -10){
    -webkit-transform: rotate($rotate + deg);
    -moz-transform: rotate($rotate + deg);
    -o-transform: rotate($rotate + deg);
    -ms-transform: rotate($rotate + deg);
    transform: rotate($rotate + deg);
}

@mixin button {
	display:block;
	width:40px;
	height:40px;
	border:none;
	@include kadomaru(10px);
	background:$color5;
	@include abs-tr(25,15);
	
	span {
		display:block;
		height:3px;
		width:90%;
		margin:5px auto;
		background:$white;
		@include kadomaru(5px);
		@include anime;
		@include rotate(0);
	}
}
@mixin buttonclose {
	span:nth-child(2) {
		display:none;
	}
	span:nth-child(1) {
		@include anime;
		@include rotate(-45);
		position:relative;
		top:4px;
	}
	span:nth-child(3) {
		@include anime;
		@include rotate(45);
		position:relative;
		top:-4px;
	}
}


	button {
		display:block;
		@include button;
		
	}
	button.close {
		@include buttonclose;
	}

HTML

 <button><span></span><span></span><span></span></button>

【WordPress】スラッグからURL(URI)を取得する方法

http://wp2.trojanbear.net/1162.html

//カテゴリースラッグからカテゴリーを取得
$cat = get_category_by_slug('slugname');
//カテゴリーIDからURL文字列を取得
echo get_category_link( $cat->cat_ID );


//固定ページのスラッグからページを取得
$page = get_page_by_path('slugname');
//ページIDからURLを取得
echo get_permalink( $page->ID );


//投稿スラッグ(固定ページは除く) から 投稿idを取得。
function get_post_id_by_slug($post_slug){

	$args=array(
	  'name' => $post_slug,
	  'post_type' => 'post',
	  'post_status' => 'publish',
	  'numberposts' => 1
	);
	$found_posts = get_posts($args);
	if( $found_posts ) {
		return $found_posts[0]->ID;
	}else{
		return NULL;
	}
}

//投稿スラッグからidを取得
$id = get_post_id_by_slug( 'slugname' );
//idからURLを取得
echo get_permalink( $id );

【Jquery】シンプルな画像切り替えJSサンプル

すごい簡単な画像切り替えのJS
ECサイトによくあるあれっすあれ。
前回に引き続き、ID割り振りとかめんどくさいのでエセ汎用ぽく作ってます。
ビバ!thisとかprevとかnextとかchildrenとか!

HTML

    <div class="change">
     <div class="main"><a href="img/sample.jpg" target="_blank"><img src="img/sample.jpg"></a></div>
     <div class="thums">
      <a href="img/sample.jpg" target="_blank"><img src="img/sample.jpg"></a>
      <a href="img/sample2.jpg" target="_blank"><img src="img/sample2.jpg"></a>
      <a href="img/sample3.jpg" target="_blank"><img src="img/sample3.jpg"></a>
     </div>
    </div>

SASS


		.change {
			width:720px;
			overflow:hidden;
			.main {
				float:left;
				width:610px;
			}
			.thums {
				width:95px;
				float:right;
				text-align:left;
				img {
					margin-bottom:10px;
				}
				span {
					display:block;
					margin-bottom:5px;
				}
			}
		}

CSS


		.change {
			width:720px;
			overflow:hidden;
		}
			.change .main {
				float:left;
				width:610px;
			}
			.change .thums {
				width:95px;
				float:right;
				text-align:left;
			}
				.change .thums img {
					margin-bottom:10px;
				}
				.change .thums span {
					display:block;
					margin-bottom:5px;
				}

JS

<script type="text/javascript" charset="utf-8">
$(function(){
	$(".change a").hover(
		function () {
			var ImgSrc = $(this).attr("href");
			$(this).parent().prev().children("a").attr({href:ImgSrc}).children("img").attr({src:ImgSrc});
			return false;
		},
		function () {
		}
	);
});
</script>