takaomi | みやこデザイン｜京都のWEB＆SEOコンサルティングオフィス

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

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

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

wp-includes/plugin.php on line 503の復旧

エラーが出たのでトラブルシュート、色々作業していたので、何が原因かを特定することが少し難しかった。

１．ワードプレス自体をアップグレードしていた。
２．テーマファイルを書き換えていた。
３．直前にトータルキャッシュを入れてminifyを有効化した。

最終的には、自分がfunctions.phpのコードを一部消し忘れていたという単純ミスでした。

トラブルシュートした手順

１．プラグイン無効化。
２．その状態で、wp-includesフォルダのみ削除して再度アップロード。
３．それでも消えないので、グーグル先生に聞いてみる
４．プラグイン無効化とかばかりだったので、画面を閉じて深呼吸。
５．テーマファイルで触ったのはCSSとfunctions.phpだけ。cssはまず関係ないと考え
functions.phpを見てみると、add_headを消し忘れていた。
６．そこを消して修正完了。

落ち着いて作業しなあきませんな。

2015年11月22日全般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

カウンターを設置、画面に現れたら一回だけ実行する。

　カウントアップ用カウンターを作った。これは簡単だ。画面に表示したらというタイミングコントロールも自分で書ける。しかし、これを組み合わせると、どうしてもスクロールすることに実行されてしまう。つまり、画面を動かす度にカウン…

2015年2月17日全般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

抜粋のあれこれ

デフォルトでも抜粋という入力欄がある。このデフォルトの抜粋はカスタムフィールドの一種だそうな。まずは、普通の抜粋からメモっておこう。本文を抜粋するあれこれ１．抜粋を表示させる。 [crayon-6620e0fdb…

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

タグラインのカスタマイズ

やりたかったことタグラインを最上部に表示させる。その部分にカスタムフィールドで見出しを作りh1でマークアップする。見出しが空でなければ入力値をｈ１でマークアップし、空であればタグラインを表示させる。入力値が空であ…

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

Author Archives: takaomi

トラブルシュートした手順