'ワードプレス' Tag

別のワードプレスでは動作したのに、今はJQueryが動かないという時の対処法

main_catch

「あれ!?前に別のワードプレスに組み込んだ時は動作したのに、今回はJQueryが動かない」という時の対処法!!ほぼ同じ環境下のWPサイトで、全く同じ記述してるのに片方は動いて片方は動かない・・・という時の対処法です。ケースバイケースだとは思いますが、この記事が皆さんのお役に立てたら嬉しい限りです。

念の為にワードプレスでJQueryを使用するときの注意点

ワードプレス内でJQueryを使用するには$をJQueryに変えなきゃいけないというお約束が存在します。
例えば、

$(function(){
$(‘.toTop’).click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});

上記はJQueryを使用してページ内リンクのスムーススクロールを実装するコードです。ワードプレス以外で使用する場合はこのままの記述で問題ありませんがワードプレスサイトでこのままの記述だと動かなくなってしまいます。これをワードプレスで使えるようにするには

jQuery(function(){
jQuery(‘.toTop’).click(function () {
jQuery(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});

と書き換えなければなりません。恐らくこの記事に辿り着いた方は「そんな事は百も承知だ!!」という方々だと思われますが、念の為・・・。

$をJQueryに変更もしている、なのに動かない場合

こうなってしまうと気が滅入ってしまいますよね・・・。しかも筆者の場合、記事タイトルの様に異なるワードプレスサイトで片方は動いて片方は動かないという状況だったので、なおさら頭を抱えました・・・。ただ同一コードで片方は動いて片方が動かないなんてコンピューターの世界であり得るわけがないと思い、2サイトのソースの差分を探しました。

wp_head()で読み込まれるJQuery本体に差分発見!!

自分でCDNなんかでJQueryを読み込んでいたのですが、キチンと動作する側はwp_head()で読み込まれるファイル群にJQuery本体が無く、動いてくれない方は読み込まれるファイル群にJQueryが含まれていました。早い話、動かない側はJQueryを二回読み込んでいた(しかも違うバージョン)そりゃ動かないですよね・・・。

wp_deregister_script()を使い、wp_head()で読み込まれるJQueryを削除する

下記のコードを組み込むことでJQueryの二重読み込みを避ける事ができます。ひとまずは、このコードで一旦は解決しました。ですがIE8でページを閲覧するとまた別の問題が発生してしまいました。

<?php wp_deregister_script(‘jquery’); ?>
<?php wp_head(); ?>

wp_head()で読み込まれていたプラグイン関連がIE8と相性が悪かった

wp_head()は使用しているプラグイン関連のファイルをを使っていないページでも読み込みます。今回作成していたサイトはlightBox2のプラグインを使用していたのですが、どうやらIE8ではlightBox2で使用しているライブラリ「prototype.js」がlightboxを使用していないページでエラーを起こしていたらしく、lightBoxを使用していないページはprototypeを外す必要性が出てきました。

<?php wp_deregister_script(‘jquery’); ?>
<?php wp_deregister_script(‘prototype’); ?>
<?php wp_head(); ?>

と記述すればもちろんprototypeの除外は出来きますがそうするとlightBoxを使いたいページでもprototypeが読めなくなってしまう。それは非常に困るので、条件分岐でprototypeが必要な所だけ呼び出せるように改良しました。筆者の場合特定のカテゴリのみ使用していたので

<?php
global $post;
$post_id = $post->ID;
$post_cats = get_the_category($post_id);
$post_cat_id = $post_cats[0]->cat_ID;
$post_cat_parent = $post_cats[0]->category_parent;
?>

//中略

<?php wp_deregister_script(‘jquery’); ?>
<?php if ( !($post_cat_id == lightboxを使うカテゴリID) || !($post_cat_parent == lightboxを使うカテゴリID) || !(cat_is_ancestor_of( lightboxを使うカテゴリID , (int)$post_cat_id ))) { ?> <?php wp_deregister_script(‘prototype’); ?>
<?php } ?>
<?php wp_head(); ?>

とすることでIE8での問題も解決しました。この記事が皆様のお役に立てることを願っています。

このようにニワカソフトでは日々新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

【JQuery】リピート表示させた背景画像をエンドレスでスライドさせる方法

top_catch

JQueryを使用し背景画像を横にスライドさせる方法

今回はJQueryの記事になります。まさに、上のメインキャッチでやっているのですが、リピート表示させた背景画像をエンドレスで動かしたいなと思いネット上で探してみました。するとツーブロッカさんの記事が見つかりましたのでこちらを参考にスクリプトをいじってみました。

オーソドックスな横移動パターン

まずは、htmlとcssから成形していきます。JQueryを使用しますので<head>内にJQuery本体を読み込んでおいて下さい。verは1.7.2以外を試してないですが、これ以降のverであれば問題無いかと思われます。

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

動く背景を導入したい箇所に下記のHTMLを記述して下さい。

<div id=”sample01″>&nbsp;</div>

そしてCSSの記述

#sample01{
background-image:url(ファイルパス);
background-repeat:repeat;
}

上記で準備OKです。それでは、JSの記述です。画像のサイズ等は適宜環境に合わせて変更してくださいね!。外部JSファイルまたは、<head>内に<script>タグで記述されて下さい。※外部ファイルとして読み込むパターンでも<head>内に書き込むパターンであっても必ずJQuery本体を読み込んだ後に記述されて下さい。

$(function(){
$(“#sample01”).css(“background-position” , “0% bottom”);//横に流したい=Xの値を動かすため、Xの値にあたる部分を「0%」としています。
var scrollSpeed = 1;//px 移動する量
var imgWidth = 500;//画像の幅
var posX = 0;//背景のスタート位置(この後の記述でこの変数posXの数値が増加する事で背景画像の移動が可能となります)
setInterval(function(){
if(posX >= imgWidth){ posX = 0; }//変数posXの値が画像の横幅の数値まで増加したらposXの値を0に戻す
posX += scrollSpeed;//posXの値に、scrollSpeedの値を足していく
$(“#sample01”).css(“background-position” , posX + “px bottom”)//上でどんどん増加するposXをbackground-positionの横位置に挿入
} , 50);//移動スピードを変更したい時はこの「50」の数値を増減させる
});

上記スクリプトの詳しい解説はツーブロッカさんの記事でされているのでコメントアウトの内容を付け足すだけにしています。ちなみに完成図はこちらのサンプル01です。

縦方向に移動させるパターン

では今度は縦方向に移動させてみようと思います。HTMLとCSSの記述は基本的にはsample01と同じです。

HTML

<div id=”sample02″>&nbsp;</div>

CSS

#sample02{
background-image:url(ファイルパス);
background-repeat:repeat;
}

javascript

$(function(){
$(“#sample02”).css(“background-position” , “left 0%”);//縦に流したい=Yの値を動かすため、Yの値にあたる部分を「0%」としています。
var scrollSpeed = 1;//px 移動する量
var imgHeight = 242;//画像の高さ
var posY = 0;//背景のスタート位置
setInterval(function(){
if(posY >= imgHeight){ posY = 0; }//変数posYの値が画像の横幅の数値まで増加したらposYの値を0に戻す
posY += scrollSpeed;
$(“#sample02”).css(“background-position” , “left ” + posY + “px”)//上でどんどん増加するposYをbackground-positionの縦位置に挿入
} , 50);
});

縦方向の移動なのでbackground-positionの縦位置を増加するように変更するのと、変数posYのリセットする値を画像の高さに変更する位で元々のスクリプトからさほど変更点はありませんが、これで縦方向に移動するようになります。完成図はこちらのサンプル02です。

繰り返しをしていない画像を横方向に移動させる

このスクリプトを扱いながら、動物が歩いて横切って行くような事も可能だなと思い作ってみました。

HTML

<div id=”sample03″>&nbsp;</div>

CSS

#sample03{
background-image:url(ファイルパス);
background-repeat:no-repeat;
}

javascript(※前半部)

$(function(){
$(“#sample03”).css(“background-position” , “0% bottom”);//横移動なのでXの数値を0%に
var scrollSpeed = 1;//px 移動する量
var acrossWidth = 500;//横切らせたい要素の幅
var posX = -132;//背景のスタート位置

一旦ここで解説します。このサンプル03ではこちらの猫さんushi-aruku-bannerを横切らせています。画像のサイズは132×65です。今回は今までのサンプルと違いリピートしていない画像を横移動させる事が目的となります。

なので変数acrossWidthには「横切らせたい要素の幅」が入ります。ここに画像の横幅を指定してしまうと当たり前ですが横切ってくれないです。そして変数posXには画像の横幅分を引いた-132を代入しています。これは、猫さんがノソノソ~っと頭から現れるのを表現したかった為この数値が代入されています。もしページを表示させた当初から表示されていても問題なければ0を代入していても構いません。それでは続きのスクリプトです。

javascript(※後半部)

setInterval(function(){
if(posX >= acrossWidth){ posX = -132; }//posXがacrossWidthの値になった時画像の横幅を差引いた分の位置に戻す
posX += scrollSpeed;
$(“#sample03”).css(“background-position” , posX+”px bottom”)
} , 50);
});

ここで重要になるのは2行目の「if(posX >= acrossWidth){ posX = -132; }」になります。ここはサンプル1、2でもコメントで解説していますが、posXがacrossWidthの値になった時という条件文です。今までと同じように「if(posX >= acrossWidth){ posX = 0; }」と記述してしまうと、猫さんが指定された範囲を横切り終わった時に突然左端に現れてしまいます。できれば自然な感じで猫さんには頭から徐々に現れて欲しいので画像の横幅分を差引いた分をposXには代入しています。ではこのスクリプトの全体像です。

javascript(※全体像)

$(function(){
$(“#sample03”).css(“background-position” , “0% bottom”);//横移動なのでXの数値を0%に
var scrollSpeed = 1;//px 移動する量
var acrossWidth = 500;//横切らせたい要素の幅
var posX = -132;//背景のスタート位置
setInterval(function(){
if(posX >= acrossWidth){ posX = -132; }//posXがacrossWidthの値になった時画像の横幅を差引いた分の位置に戻す
posX += scrollSpeed;
$(“#sample03”).css(“background-position” , posX+”px bottom”)
} , 50);
});

完成図はこちらのサンプル03です。いかがでしょうか?静止画より少しだけ楽しげになりませんか?今後もニワカソフト一同日々勉強してニワカソフトで提供できる物の可能性を広げてまいります!!

【WP】特定の親カテゴリに所属する全ての子カテゴリの最新記事一覧を作る方法

特定の親カテゴリに所属する全ての子カテゴリの最新記事一覧を作る方法

意外と融通の効かないWPのカテゴリ構成

今回はワードプレス関連の記事になります。WP案件の中で、右の画像のようなカテゴリ構成の状態で親カテゴリID1とID5は別ページで、それぞれのページで所属している子カテゴリ含めてそのカテゴリの新着情報一覧を作成しようとしていました。もしかするとプラグインで同等の事がサクっと出来てしまうかもしれませんが、公式でない場合マルウェアに感染するリスクや他のプラグインとの相性なども有るため今回はphp手書きでの対応の紹介となります。

カテゴリーサンプルイメージ

早速、親カテゴリID1の最新記事一覧を作っていきます。出力の際に「日時」「カテゴリ名」「タイトル」といった具合に出力し「カテゴリ名」は所属する親カテゴリ名で出力しようと思っています。右のイメージは完成図です。

完成予想図

それならば、query_posts()で子カテゴリのIDを指定して出力すればいいか。と深く考えずにコーディングしてしまいました。

<?php
if (query_posts(‘cat=1,2,3,4’)):;
while(have_posts()) : the_post();
?>

しかし、よくよく考えるとこの方法だと後々子カテゴリが増えた時に手動対処しなくちゃならない訳であまり使い勝手が良くないと思い何とか動的に出来ないものかと試行錯誤・・・

get_term_children()で子カテゴリを取得して出力

「親カテゴリ 子カテゴリ 取得」と検索をかけると色々出てきました。get_term_children()で親カテゴリを指定してその親カテゴリに所属する、子カテゴリを取得することが出来ると知り早速コーディング。

<table>
<?php
$cat = get_the_category(); // 表示中の記事のカテゴリ
$parent_cat_id = $cat[0]->term_id; // 親カテゴリのIDを取得
$categories = get_term_children($parent_cat_id, ‘category’);//親カテのIDを第一引数に指定し$categoriesに代入し所属する子カテゴリのidを全て取得
foreach ($categories as $key => $value) {//所得した子カテゴリ情報は配列の為foreachで回して「.=」で「$categories_num」に付け足して代入
$categories_num .= $value . ‘,’;
}
if (query_posts(“cat=$categories_num”)):;//全カテゴリidをquery_postsのidに指定
while(have_posts()) : the_post();
$parent_cat = get_category( $parent_cat_id ); // 親カテゴリの情報(オブジェクト)を取得
$cat_name = $parent_cat->cat_name;
?>
<tr>
<td><?php the_time(‘Y/m/d’); ?></td>
<td><?php echo $cat_name; ?></td>
<td><a href=”<?php the_permalink(); ?>”><?php the_title();?></a></td>
</tr>
<?php endwhile;?>
<?php else: ?>
<tr>
<td colspan=”3″>現在ニュースはありません。</td>
</tr>
<?php endif; ?>
<?php wp_reset_query(); ?>
</table>

さあ、早速出力結果を確認だ!!と意気揚々とブラウザを見ると・・・。「あれ?・・・なんか表示件数が少ないぞ・・・」右のイメージは出力された結果のキャプチャです。よくよく見ると親カテにのみチェックが入っている記事(ID1に属する記事)が出ていない模様。

親カテゴリのみにチェックが入っている記事が表示されていないイメージ

get_term_children()で取得できるのは子カテゴリのみ

なんとget_term_children()では指定された子カテゴリの情報が取得出来るだけで、その親カテまでは取得出来ない模様。それなら親カテのidを付け足せばいい訳で、

<?php
$cat = get_the_category(); // 表示中の記事のカテゴリ
$parent_cat_id = $cat[0]->term_id; // 親カテゴリのIDを取得
$categories = get_term_children($parent_cat_id, ‘category’);
foreach ($categories as $key => $value) {
$categories_num .= $value . ‘,’;
}
$categories_num .= $parent_cat_id;//foreachのループ終了後親カテidを$categories_numに続けて代入
if (query_posts(“cat=$categories_num”)):;
while(have_posts()) : the_post();
$parent_cat = get_category( $parent_cat_id ); // 親カテゴリの情報(オブジェクト)を取得
$cat_name = $parent_cat->cat_name;
?>

ようやく希望通りの出力になりました。これで子カテゴリが増えても問題なし!!