ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2018年5月20日webcode編集部FacebookTwitterはてブPocketFeedlyグローバルナビにアニメーションを導入したい。パララックスエフェクトのようなエフェクトを加えたい。スクロールに応じてクラスを変更したい。いったことはjqueryを使うことで解決できますが、wordpress内のphpファイルを編集しないといけないので、初心者にはとっつきにくいです。今回の記事では、そんな方もjqueryの導入に一歩踏み出せるように丁寧に解説していきたいと思います。おまけ:jqueryスライダーの作成方法jqueryとは?まず、jqueryとは何かについて説明しておきます。jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。参考-wikipediaより簡単に表現するのであれば「javascriptをより簡単に書くための方法」です。jqueryで何ができるのか?簡単に、jqueryで何をすることができるか?を纏めておきました。この「できること」を知っていると、アイデアの幅が広がるのでまだ不安な方は一回確認しておきましょう。CSSを変更できるjqueryを使うと、CSSを直接変更できます。JavaScript$('p').css('color','red');1$('p').css('color','red');このように記載することで、今回の例だとpセレクタの文字色が変わります。複数のCSSを同時に変更したい場合は、以下のように書きます。);12345$("p").css(color:"red",font-size:"16px",font-weight:"700");このjqueryの.css()を利用した場合は、HTMLタグのstyle指定を直接した場合と同様になります。クラスやID(HTML)を取得・追加・削除できるjqueryを使ってHTMLセレクタにクラスやIDを追加したり、削除したりできます。$('header').removeClass('fixed');12$('header').addClass('fixed');$('header').removeClass('fixed');上記の記述の仕方で、クラスを追加・削除できます。細かくは省略しますが、.attr()を使うことでIDやクラス、href要素を取得することも可能です。CSSと組み合わせて使うことで、デザインを変更することが可能です。イベントの条件分岐ができるここがjqueryを導入する一番のポイントでしょう。CSSを変更したり、クラスやIDを変更したりするだけでは意味がありません。「画面をクリックしたら」「100pxスクロールしたら」「要素にhover(覆う)したら」などの条件分岐ができます。このイベントの条件分岐によって、HTMLやCSSにはできないことが実現できます。jqueryプラグインとは?javascript初心者にとって、jqueryを使ったとしても難しい仕組みのスクリプトを作るのは大変です。実はそんな方のために「jqueryプラグイン」というものがあります。jqueryプラグインとは、jqueryの中でもよく使う仕組みをパッケージにして、初心者の方も使いやすいように纏めてくれたものです。wordpressのプラグインと少しイメージは違って、javascriptのライブラリと仕組みは似ています。「javascriptを簡単に書けるようにしたものがjquery」「難しいjqueryを簡単に書けるようにしたのがjqueryライブラリ」です。ややこしいですが、雰囲気だけでも覚えておくと役立ちます。jqueryプラグインの導入方法jqueryプラグインは、javascriptのライブラリを使うのと似ています。jqueryを導入する時と似ています。head内に読み込み用のスクリプトを記述し、scriptタグ内にコードを記載します。実際に導入する時の方法を紹介しておきます。使用するjqueryプラグインを選ぶまずは、jqueryプラグインを選びましょう。jqueryプラグインは非常に多く出ているので「目的にあったもの」を検索する必要があります。メニューのスライドバーなどを簡単に出せるようになるjqueryプラグイン「Slidebars.js」パララックスエフェクトを導入できるjqueryプラグイン「scrollr」このように、目的にあったjqueryプラグインを自分で調べる必要があります。jqueryプラグイン」で検索をすると、比較的見つけやすいかと思います。header.phpを編集する導入したいjqueryプラグインが決まったら、head内に書き込む必要があります。試しに、slidebars.jsを導入する場合について書いていこうと思います。slidebars.jsの場合は、ファイルをアップロードした上で読み込む必要があります。head内には下のような記載が必要です。src="js/slidebars.min.js"></script>CSSやjavascriptライブラリを読み込む際とほとんど同様ですね。jqueryのスクリプトを記述する読み込んだら、あとはスクリプトを記載します。slidebars.jsの場合も使い方が結構大変なので手順を纏めておきます。HTML設計を変更する(プラグインごとに指定があります)HTMLのクラスやIDを変更する(プラグインごとに指定があります)scriptタグ内にjqueryを記述するjqueryプラグインを導入する際の注意点ただ、jqueryプラグインを使う際にも、注意点があります。コンフリクトを避けるコンフリクト(衝突)という概念を覚えておく必要があります。これは、複数のjqueryプラグインやjavascriptライブラリが同じものを参照しようとしてバグる現象です。jqueryプラグインで起きやすい現象としてはidやclassの指定が重複する$()がjavascriptライブラリと重複するこれはもう、仕様をよく見るしか無いのですが、2番目に関してはjqueryの記述に関しては「jQuery」と記載することが大事です。バージョンを確認するjqueryプラグインの中には、元のjquery本体を利用するものがあります。この時、jqueryのバージョンが関係してきます。バージョンによって、対応ブラウザや設計が変わってきます。3をオススメしますが、現時点で古いバージョンを使っている場合は慎重になってください。「jqueryのバージョンアップをしたら、javascriptが動かなくなった」という事例が存在します。jqueryを使っている方は、jquery3に変えてみて、エラーが無ければ移行するといいでしょう。jqueryのスクリプトをどこに書くのか?ここでは、jqueryのスクリプトをどこに書くかを説明していきます。javascriptと同様に記述できるjavascriptと同様で、scriptタグを入れればどこにでも記載できます。wordpressだと「footer.php」に記載するのが多いですね。footer.phpにする理由は、jqueryの読み込むタイミングなどの理由があるのですが、本題から逸れるので省略します。固定ページに個別に記述する(テーマによる)wordpressのテーマによっては、固定ページ毎にjavascriptを追記できるテーマがあります。Base」でも個別にjavascriptを記述できる機能があります。scriptタグで囲って記載することで、jqueryを記述できます。最後にjqueryを使った具体例として、jqueryのスライダーを紹介して終わろうと思います。スライドショーの仕組みは、jqueryを使って「イベントに応じて要素のCSSを変更すること」によります。4000ミリ秒毎に、translate3dを使って左にスライドするjqueryを.css()を使って記載することで、実装できたりします。他にも、opacityの値を変更して実装するスライドショーの方法なども考えられますね。詳しく知りたい方は下の記事を参考にしてください。コピペで実装!jqueryでスライドショーを自作する方法2017.06.19Webサイトの製作時に、スライドショーを導入しようと思うことがたまにあります。実はこれをWordpressで実現するには、プラグインを使うだけなのです。株式会社ビジョンのホームページ制作の評判は?利用がおすすめな人を紹介ホームページの新規作成や、ホームページのリニューアルなどで利用されている、株式会社ビジョンの「ホームページ.com」の口コミです。株式会社...WordPress(ワードプレス)ワードプレスは儲からない?具体的な稼ぎ方を初心者に紹介ワードプレスは儲かる?ワードプレスは稼げる?という疑問をお持ちの方に、当サイトの運営者がお答えします。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。