Wordpress

自作のjQueryを追加できるプラグインをご紹介【WordPress】【Simple Custom CSS and JS】

  1. HOME >
  2. Wordpress >

自作のjQueryを追加できるプラグインをご紹介【WordPress】【Simple Custom CSS and JS】

WordPressでjQueryを使用できようになる

WordPressでjQueryを使用できようになる

  • WordPressで自作のjQueryを追加したい。
  • HTMLにCSSソースコードを追加したい。
  • JavaScriptをFooterに記述したい。

今回は、以上の悩みを解決できる記事を作成しました。

ココがポイント

結論:

プラグイン「Simple Custom CSS and JS」をつかいます。

このプラグインでは、初心者の私でもすぐにjQueryを書くことができました

Webページ作成初心者にとってはありがたいプラグインなので、
是非インストールしてみてください。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、他のWebページを見ていると、
「こういう動きのあるページ機能を自分のページにも追加したい」
そのように思ったことはないでしょうか?

私も自信のブログに動きをつけてみたいと思い、
jQueryを読み込ませようとしていたのですがなかなか思うように動作してくれませんでした。

そんな中、JavaScriptをカスタマイズできるプラグインを探していると、
「Simple Custom CSS and JS」を発見し、
早速つかってみることに。

すると、あんなに目的の動作を実装できなかったJavaScriptをあっさりページ上に表示できました。

そこで、今回このプラグインを皆様にご紹介できればと思い、
この記事を作成いたしました。

それでは、説明して参ります。

 

1.JavaScriptってなに?

JavaScriptってなに

JavaScriptってなに

JavaScriptとは、Web上ページでユーザーのアクションに対して動きをつけることのできるプログラミング言語です。
一番わかりやすいのが、「ボタンを押すと文字が表示されたり隠れたりする」この動きもJavaScriptで行っております。

 

2.jQueryってなに?

jQueryとは、JavaScriptのコードを短く書くことのできる「JavaScriptのライブラリ」です。

JavaScriptを書く上で、目的の動作を命令するためには、長い文章を書く必要がでてきます。
jQueryでは、命令文が先に作成してあるので、それを呼び出すことで文章を短くすることが可能になっております。

jQueryから目的の命令を借りてくれば、複雑なコードを毎回書かなくて済むようになるので、
是非、WordPressでもJavaScriptやjQueryを書きたいですね。

 

3.「Simple Custom CSS and JS」をインストール

JSインストール

WordPressダッシュボードの「プラグイン」から「新規追加」を選択。

 

JSインストール

キーワードに「Simple Custom CSS and JS」と入力して目的のプラグインをインストール。
「有効化」を必ず忘れずにしておきます。

 

4.「Simple Custom CSS and JS」の使い方

メニューから新規ページを追加

 

4.1「Add Custom JavaScript」の使い方

JavaScriptの追加編集

「タイトル」 実装アクションがわかりやすい名前にする。
本文 赤文字はただのコメントです。動作には何も影響しません。
コメントが残っているとその分動作が重くなるので消しておくとよいでしょう。
(削除しても、新規のシートを追加することでまたテキストを読むことができます)
後は、JavaScriptのコードを記入するだけです。
Where on page.
ページのどこに追加するか
プログラミングのコードは上から順に読み込まれます。
Headerにコードを追加しすぎるとWebページ全体が重くなる原因になります。
よって、JavaScriptはFooterに追加をおすすめします。

 

4.2「Add Custom HTML」の使い方

HTMLを追加編集

大半は、外部のソースコードをリンクさせることに使うと思います。
例:<script src="https://example/example.js">

CSSのスタイルソースコードをリンクさせるときは、「Where on page」を「Header」に。
JavaScriptのソースコードをリンクさせるときは、「Where on page」を「Footer」にするとよいでしょう。
「4.4 ポイント」で理由を解説します。

 

4.3 「Add Custom CSS」の使い方

CSSを追加編集

「Add Custom CSS」にCSSスタイルを追加する方は、「Where on page」を「Header」にしてください。
「4.4 ポイント」で理由を解説します。

 

4.4 ポイント

ココがポイント

「Where on page」の使い分け

記述した文章は、常に上から下に向かってWebブラウザで読み込まれていきます。
Headerにコードを記述していくと、そのページの読み込みに時間がかかる原因になってきます。

基本的にHeaderに書くのは、そのページを読み込む前に必要な命令のみしましょう。

今回の場合は、ページのスタイルに関わるCSSコードやCSSソースコードがHeaderに。
JavaScriptコードやJavaScriptソースコードはFooterにいれておけばOKです。

CSSの編集はテーマのカスタマイズで行う

今回は、このプラグインでCSSの追加もできることもご紹介させていただきました。

しかし、CSSの編集は、プレビューを見ながら行う方が調整をしやすいと思います。

私は、テーマのカスタマイズに元々ある「CSS追加」機能を使用しております。

 

まとめ

お疲れ様でした。

今回は、プラグイン「Simple Custom CSS and JS」をご紹介させていただきました。

ココがポイント

Simple Custom CSS and JSのメリット

  1. ページのどこに追加できるかを選べる。(ページ読み込みの軽減が行える)
  2. WordPress初心者でも、基本の「JavaScript」と「jQuery」を使用するところまで、このプラグイン一つでいける。
  3. JavaScriptソースコードやCSSソースコードをHTMLに追加できる。

以上になります。

ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.