カスタマイズ | 京都でホームページ制作『みやこデザイン』

アクティブだったらサイドバーを活用したい場合

　サイドバーは普通に書くと、アクティブでない場合もマークアップされてしまう。なので、サイドバーに何か入っている時だけアクティブにするというコードが便利だ。いつでも引っ張り出すのに苦労するのでここに書き留めておこう。 [c…

2016年1月6日カスタマイズBy takaomi

post snippets　でカスタムポストタイプから投稿を抽出

ポストスニペッツは便利だが、カスタムポストタイプの挿入は難しい。よく使うのでメモっておこう。

$args = array(
'cat' => {bunrui},
'post_type' => 'disease',
'order' => 'DESC',
'posts_per_page' => {kazu},
);
$the_query = new WP_Query( $args ); ?>
<ul class="arrow">
<?php if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</ul>

$args = array(

'cat' => {bunrui},

'post_type' => 'disease',

'order' => 'DESC',

'posts_per_page' => {kazu},

);

$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) :

while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>

<?php endwhile; ?>

<?php endif; ?>

<?php wp_reset_postdata(); ?>

</ul>

変数は見てのとおりkazu,bunruiです。動くよ~

2015年6月21日カスタマイズ, プラグインBy takaomi

いわゆるスティッキーヘッダー

スティッキーなヘッダーを作る。

$(function () {
    $('#header').each(function () {
        var $window = $(window), // Window オブジェクト
            $header = $(this),   // ヘッダー
            // ヘッダーのクローン
            $headerClone = $header.contents().clone(),
            // ヘッダーのクローンのコンテナー
            $headerCloneContainer = $('<div id="sticky-header"></div>'),
            // HTML の上辺からヘッダーの底辺までの距離 = ヘッダーのトップ位置 + ヘッダーの高さ
            threshold = $header.offset().top + $header.outerHeight();
        // コンテナーにヘッダーのクローンを挿入
        $headerCloneContainer.append($headerClone);
        // コンテナーを body の最後に挿入
        $headerCloneContainer.appendTo('body');
          $window.on('scroll', function () {
            if ($window.scrollTop() > threshold) {
                $headerCloneContainer.addClass('visible');
            } else {
                $headerCloneContainer.removeClass('visible');
            }
        });
        // スクロールイベントを発生させ、初期位置を決定
        $window.trigger('scroll');
    });
});

$(function () {

$('#header').each(function () {

var $window = $(window), // Window オブジェクト

$header = $(this), // ヘッダー

// ヘッダーのクローン

$headerClone = $header.contents().clone(),

// ヘッダーのクローンのコンテナー

$headerCloneContainer = $('<div id="sticky-header"></div>'),

// HTML の上辺からヘッダーの底辺までの距離 = ヘッダーのトップ位置 + ヘッダーの高さ

threshold = $header.offset().top + $header.outerHeight();

// コンテナーにヘッダーのクローンを挿入

$headerCloneContainer.append($headerClone);

// コンテナーを body の最後に挿入

$headerCloneContainer.appendTo('body');

$window.on('scroll', function () {

if ($window.scrollTop() > threshold) {

$headerCloneContainer.addClass('visible');

} else {

$headerCloneContainer.removeClass('visible');

}

});

// スクロールイベントを発生させ、初期位置を決定

$window.trigger('scroll');

});

　これは本を参考にした。でもね、スティッキーではロゴ画像を変えたかったんだな。これって以外と単純な方法でできるんやんね。つ…

2015年2月25日カスタマイズBy takaomi

画面に表示されたらアニメーションを実行するjquery

jqueryはプラグインが色々あって便利だけど、ヘッダを見たときやたらプラグインを読み込んでいるのは格好いいとは言えない。
だから自分で書けるものは自分で書くのがよろし。

さて、プログレスバーを動かすのに、ページの下の方にあるやつは、タイミングをコントロールしないと動きが見えない（スクロールするまでにアニメーションが終わっちゃう）。

なので、それをコントロールするためのスクリプトがこちら。

$(function(){
	var triggerNode = $("div.progress-bar");
	$(window).scroll(function(){
		var triggerNodePosition = $(triggerNode).offset().top - $(window).height();
		if ($(window).scrollTop() > triggerNodePosition) {
				$.each($('div.progress-bar'),function(){
				$(this).css('width', $(this).attr('aria-valuetransitiongoal')+'%');
			});
		}
	});
});

$(function(){

var triggerNode = $("div.progress-bar");

$(window).scroll(function(){

var triggerNodePosition = $(triggerNode).offset().top - $(window).height();

if ($(window).scrollTop() > triggerNodePosition) {

$.each($('div.progress-bar'),function(){

$(this).css('width', $(this).attr('aria-valuetransitiongoal')+'%');

});

}

});

動いてるよ～。

2015年2月14日カスタマイズBy takaomi

functions.phpからbodyに独自クラスを追加

　普通のブログなんだけど、阪神タイガースの記事タイトルだけを背景黄色で文字黒にする必要が生じた。
　
　どこにクラスを付けるのかという論点があるけれど、ここはやっぱりbodyでしょう。ということで、コードを探してみたけど皆さんheader.phpに直書きしていらっしゃる。

　それもいいんだけど、やっぱりここはスッキリfunctions.phpにまとめてしまいたいところ。
　なので、自分で書きました。

<?php
add_filter('body_class', 'my_class_names');
function my_class_names($classes) {
	$cat = get_the_category();
	$cat = $cat[0];
	$classes[] = ''. $cat->category_nicename .'';
	return $classes;
}
?>

<?php

add_filter('body_class', 'my_class_names');

function my_class_names($classes) {

$cat = get_the_category();

$cat = $cat[0];

$classes[] = ''. $cat->category_nicename .'';

return $classes;

}

うん、悪くない。

2015年1月31日カスタマイズBy takaomi

last-child の after をCSSで設定する方法

　フッターメニューなんかを触っている時、最後の要素のafter だけスラッシュやパイプを消したい場合がある。
　その設定方法。簡単ですわ。

ul.footermenu li:after {
	content: "/";
	padding:0 5px;
}

ul.footermenu li:last-child:after {
	content:"";
}

ul.footermenu li:after {

content: "/";

padding:0 5px;

}

ul.footermenu li:last-child:after {

content:"";

}

　IEでは動かないよね。でも大丈夫。IE使ってる人はそこまで気にしないだろうからさ。

2015年1月31日カスタマイズBy takaomi

これらのアクションフックを使うのが正しい。また、functions.phpを使う場合、テーマ場所の指定は特殊な方法となる。

すなわち、以下。

<?php
function add_head(){
	wp_enqueue_script( 'original', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '20140319', false );
}

add_action('wp_enqueue_scripts', 'add_head');

?>

<?php

function add_head(){

wp_enqueue_script( 'original', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '20140319', false );

}

add_action('wp_enqueue_scripts', 'add_head');

2014年12月31日カスタマイズBy takaomi

クリッカブルなテーブルを作成する。

テーブルを作り、セル内全てをクリッカブルにするには、aタグをブロック要素にして、widthとheightをそれぞれ100%に設定すればいい。

そこまでは分かる。けれど、セルを結合させて、日本地図をクリッカブルにした場合には、100%設定にしてもクリック可能にならない。ならばjqueryでやってしまおうというのが今回の狙い。

jQuery( function($) {
	$('tbody tr td[data-href]').addClass('clickable').click( function() {
		window.location = $(this).attr('data-href');
	}).find('a').hover( function() {
		$(this).parents('td').unbind('click');
	}, function() {
		$(this).parents('td').click( function() {
		window.location = $(this).attr('data-href');
		});
	});
});

jQuery( function($) {

$('tbody tr td[data-href]').addClass('clickable').click( function() {

window.location = $(this).attr('data-href');

}).find('a').hover( function() {

$(this).parents('td').unbind('click');

}, function() {

$(this).parents('td').click( function() {

window.location = $(this).attr('data-href');

});

2014年12月25日カスタマイズBy takaomi

Category Archives: カスタマイズ