【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>

【wordpress】trustformのメールアドレス確認ではまったとき

メールアドレス確認用を追加したところ、なんと!
trustformの確認画面でメールアドレスが消えちゃってる!
ってな現象があったので、この現象はどう探せばよいのだ…
と思いつつ「trustform メールアドレス確認 確認画面」であっさり見つかったでござる。
たぶん、これが原因ぽいので助かりました!

「メールアドレス」項目は 「メールアドレス要素」ブロックで作りますが

「メールアドレス【確認】」項目は「テキストボックス要素」ブロックで作成しましょう!!!

引用:Trust Form(WordPressプラグイン)で普通ははまらないところでハマったハマった(泣)
https://blog.gti.jp/post-3310

【wordpress】カスタムフィールドを使って条件分岐でカテゴリテンプレートを変更する

固定ページの用にテンプレート設定ができると一番よいのですが、、、なぜないの^^;

今回進めてる案件では最上位カテゴリと2階層目の子カテゴリがないカテゴリと2階層目の子カテゴリがあるカテゴリと3階層目のカテゴリで表示方法が違うので最初はcategory.phpで対応しようとしてたんですが、どうも面倒くさ…(ゲフンゲフン)もとい、時間がかかってしまうので
あらかじめ決めうちでテンプレ作って、カスタムフィールドの値で分岐させようかなーってノリです。
使ったプラグインは超有名「advanced custom fields」です。

使いまわしが効くようにwp_queryでもろもろゲットしてます。

global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$current_id = $cat_obj->cat_ID;
$post_id = 'category_'.$current_id;
$cat_select = get_field('cat_temp',$post_id);
if($cat_select == "○○○") {
include_once(TEMPLATEPATH . '/category_○○○.php');
}else if($cat_select == "○○○") {
include_once(TEMPLATEPATH . '/category_○○○.php');
}else if($cat_select == "○○○") {
include_once(TEMPLATEPATH . '/category_○○○.php');
}

[jquery]超簡易なインライン要素のモーダルウィンドウ

せっかく作ったので一応載せておこう。
汎用性は…おそらく…ない…でしょう。^▽^;
IDとかclass割り振りとかそこまで組むのがいやだったので単純にnextで処理かけています。
なのでsampleブロックを複製すれば複数のモーダルが設置できます。

HTML

   <div class="sample">
    <a href="#" class="inline"><img src="sample.jpg"></a>
    <div class="modal-inline">
     <div class="modal-cont">
      <p><img src="sample_l.jpg"></p>
      <p>ここにテキスト</p>
     </div><!--//modal-cont-->
    </div><!--//modal-inline-->
   </div><!--//sample-->

   <div class="sample">
    <a href="#" class="inline"><img src="sample.jpg"></a>
    <div class="modal-inline">
     <div class="modal-cont">
      <p><img src="sample_l.jpg"></p>
      <p>ここにテキスト</p>
     </div><!--//modal-cont-->
    </div><!--//modal-inline-->
   </div><!--//sample-->

ぶっちゃけ、modal-inlineのdivはいらないっていう ^^;

CSS


.modal-cont {
	width: 50%;
	height:50%;
	margin: 0;
	background:#fff;
	position: fixed;
	z-index: 999;
	top:50%;
	left:50%;
	margin-left:-50%;
	margin-top:-50%;
	text-align:center;
	border-radius:30px;
}

.overlay {
	display: block;
	position: fixed;
	top: 0 ;
	left: 0 ;
	cursor:pointer;
	width: 100% ;
	height: 100%;
	min-height:100%;
	background: rgba( 0,0,0, 0.75 ) ;
	zoom:1;
	z-index: 300;
	}

JS

jQuery(function($){
	$(".inline").on('click', function() {
		$("body").css("overflow","hidden");
		$(this).next().fadeIn("fast");
		$(".modal-cont").before("<div class=overlay></div>");
	});
	
	$(document).on("click",".overlay ", function() {
		$("body").css("overflow","visible");
		$(".modal").fadeOut("fast");
		$(".overlay").remove();
	});
  });

【jquery】beforeやappendで追加した要素でonclickイベントが実行しないとき

ちょっとカスタマイズが必要だったので自作モーダル作ってたら、DOM追加した要素のclickが効かないので格闘すること1時間…。
開発者ツールでもエラーが出ないのでめっちゃ悩みました。

$(".yoso").before("<div class=close></div>").append("<div class=photo></div>");

<div class="yoso">しょーりゃく</div>

こういう感じでdivの中に要素追加した場合、下記のコードでは動きません。
追加要素に対してはスルーされてしまうようです。

$(".close").on('click', function() {
//省略
});

なので、こっちで記述すると良い模様~。

$(document).on("click",".close", function() {
//省略
});

長かったぜい…。

参考:jQueryのappendで追加した要素のclickイベントが動かない場合
http://milkyshade.com/javascript/166/