add_filter( 'filter_hook_name', 'filter_hook_add_name', 10, 2 ); funcion filter_hook_add_name( ){ // //PHPのコード // } JavaScript | オンラインNOTE
お知らせ

JavaScript

JSすぐに使えるサンプル集

http://www.shurey.com/js/samples/index.html

 JavaScript サンプル集 & HTML の基礎

http://www9.plala.or.jp/oyoyon/html/

 

 

JavaScript入門&サンプル集

http://plusone.jpn.org/javascript/index.html

 

  

 

 

 

WordPressでJavaScriptを使うには

javaScriptはブラウザで動作するものなので、
そもそもインストールだとか設定不要

JavaScriptの記述を書いて、それを読み込ませたりする必要があります。
HTMLやCSSをWordPress外に書いても意味がないのと同じ

読み込ませ方は、大きく分けて下記の3つ

・エディタに直接記入する
記事を投稿しているエディタ、あそこに直接JavaScriptの記述を書くことで動作させることができます。
→テキストエディタの場合のみです。ビジュアルエディタをメインで使っている場合だと、段落や改行のタグが勝手に入るので使い物になりません。
→記述を入れた記事でしか適用されないので、汎用的とは言えない方法です。

・プラグインを使う
→WordPressといえば豊富なプラグインです。JavaScriptの記述を読み込ませるプラグインも当然存在します。

サイト全体に使うJavaScriptならこちら、Simple Custom CSS and JSがおすすめです。

一部の記事だけに……ということなら、Scripts n Stylesがおすすめです。

・外部ファイルとして読み込む
→JavaScriptの記述は「.js」という拡張子のファイルに記述して、そのファイルを読み込むことでJavaScriptを使う形になります。

これは通常のHTML・CSSのみで作られているサイトと同じような方法ですね。


・functions.phpに書くコード

add_xxxx(‘filter_hook_name’, ‘●●●●●’);の記述と
function ●●●●●{ PHPのコード }で囲まれたコードのセットになっているのがfunctions.phpのコードである証拠。

そのコードはfunctions.phpの一番下(最後)に追加します。

add_filter( ‘filter_hook_name’, ‘filter_hook_add_name’, 10, 2 );
funcion filter_hook_add_name( ){
//
//PHPのコード
//

}

●header.phpに書き込むコード


この形がJavaScriptのコードです。このような形を見つけたら、基本的にはheader.phpに追加します。
(例外的にページ内に書き込む場合もあり。)

ですが、WordPressでは、このままの形では使うことが出来ません。


WordPressでは、$マークの部分をiQueryに書き換えないと使えないというルールがあるからです。

いちいち書き換えるのは面倒なので、上記のコードをheader.phpの正しい位置に追加しておき、その中に拾ってきたコードを追加していけばOK。

header.phpのこのコード↓の下に


このコード↓を追加しておきましょう。



●●●●●●●●●●●●●●●●●●●●●●●●●
HTML / CSS / JavaScriptそれぞれの役割が分からない
JavaScriptでどんな処理や使い方ができるのか知りたい
JavaScriptとjQueryの役割ってなに?

・HTMLはHyper Text Markup Languageの略称なのですが、簡単に言うと文章をマークアップして構造化するという意味

・CSSはCascading Style Sheetsの略称で、簡単に言うとWebサイトの見た目を装飾するために必要な言語と言えます。

・JavaScriptはブラウザ上に実行環境がある唯一のプログラミング言語として今もWeb開発には欠かせない存在です。

基本的なWebサイトにおいて、JavaScriptの役割を簡単に言うと動きを付加するということになります。
動きを付加するというのは例えば以下のようなコンテンツを作ることです。
スライドショー
アニメーション
フォーム
アコーディオン

・「DOM」は、簡単に言うとHTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのこと言います。DOMの正式名称が「Document Object Model」と呼ばれることからも分かるように、HTML文書をオブジェクトデータのように考えます。

jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。

・Webサイトにはさまざまなイベント処理があります
→ボタンをクリックした時の処理、画面をスクロールした時の処理、フォームを送信した時の処理…など、1つのWebサイトでさまざまな種類のイベントが発動されているわけです。

このようなイベント処理に対してもJavaScriptから自由に制御することが可能なのです。

そこで、登場するのは「ツリー構造」という考え方です!これは、一般的なパソコンのファイルを整理する「フォルダ構造」と同じように考えれば分かりやすいでしょう。

次のHTMLを見てください!

これはサンプルです!

このHTMLをツリー構造にすると、まず最初に「html」というフォルダがあると考えてください。

「html」フォルダの中には、「head」「body」という2つのフォルダがあります。そして、「head」の中には「meta」という要素があり、「body」の中には「h1」という要素が格納されているのです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です