【WordPress】JavaScriptの記載をする方法(alertを理解しよう)

WordPress
Toshi
Toshi
WordPressで、記事を作成する際にHTMLやCSSは使うけどJavaScriptを使うってことは正直ない。ような気がしますが、実際テキストよりJavaScriptも記述できるため今回はWordPressを利用してJavaScriptのalertについて理解してみましょう!

今回解説していく内容は以下です!

 本記事の内容

・alertとは?
・WordPressでJavaScriptのalertを理解する
・alertの理解を深める
・jQueryのalertの記述方


alertとは?

alertとは、この記事を表示した時に出てきた警告ボックスです!

 

ホームページをぐるぐるまわっている(ネットサーフィン)とたまにこのようなalertが出てきますよねこれはJavaScriptで表示されており…コードは以下です。

alert("この記事では \n JavaScriptのalertと \n WrodPressでJavaScriptを記述する方法についてお伝えします。"); 

実際にJavaScriptを勉強する時にまずは、console.log(デバック用)をちょっと使ってみて次は alert で理解を深めようといった流れが多いかと思います。では実際にWordPressでJavaScriptのalertを理解していきましょう

WordPressでJavaScriptのalertを理解する

WordPressの記事にJavaScriptを記述できることはご存知でしょうか?実際にボタンを押すとalertが出てくると思います。WordPressにJavaScript(alert)を埋め込んで理解していきましょう!

WordPressで JavaScriptを使用する方法

テーマによっては、記事作成する際エディターの下の方に カスタムJavaScript という項目がありそこに JavaScriptを実際に記載するだけでOKです。

これがない場合には、<script>タグを使用し

<script>alert(“表示したい文字”);</script>

を ビジュアルではなくテキスト(HTML)に直接打ち込んでみてください!

alertの理解を深める

WordPressで alert をしようする方法はわかったかと思います。実際に、ボタンを押したら alert が出てくる仕組みは以下です!

<button id="a" class="btn" >A</button>
<script>
a.onclick = function() {
 alert("ボタンを押しましたね?"); 
};
</script>

alertでは、単純にalertを出す仕組みで…

<button id="c" class="btn" >C</button>
<script>
c.onclick = function() {
if (window.confirm("confirmで表示しています。confirmについて知りたいですか?")) {
  alert("知りたいです!");
} else {
  alert("興味がありません。");
}
};
</script>

confirmを使うことによって 「Yes」「No」の選択をさせることが可能になります!上記のコードを見て alert の仕組みがなんとなく理解できたのではないでしょうか?

jQueryのalertの記述方

JavaScriptの拡張機能であるjQueryのalertの指定の仕方は少し違います。

<button id="jq" class="btn">jq</button>
<script>
jQuery(function(){
   jQuery("#jq").on("click",function(){
   window.alert("jQuery");
   });
});
</script>

 


上記のように、jQuery(function(){ “やりたいこと” }); のような感じで指定します。なお、jQueryの部分は($)で表記しても構いません。※jQueryのバージョンによっては異なります。

まとめ

Toshi
Toshi

いかがでしたか?WordPressでのJavaScriptの使用方法や、alertについて理解できたかと思いますあまりJavaSscriptをWordPressの記事で使う機会はないかもしれませんが、JavaScriptの動作確認(勉強)に使用するのもありかもしれませんね。ぜひ、参考にしてみてください!

Toshikazu

Nagasaki→Tokyo→China→Fukuoka

1992/07/02

2017年からブログを運営。
現在エンジニアとして福岡で働いています。

Toshikazuをフォローする
WordPress
シェアする

コメント

  1. I am regular visitor, how are you everybody? This piece of
    writing posted at this web site is really pleasant.

  2. Toshikazu toshikazu72 より:

    thank you for your comment! I will do my best to write a better article

  3. Toshikazu toshikazu72 より:

    thank you for your comment! I will do my best to write a better article!

  4. Toshikazu toshikazu72 より:

    Thank you very much. From now on I will write good articles and I want many people to see it

  5. Unquestionably believe that that you stated. Your favourite justification appeared
    to be at the web the easiest thing to remember of.
    I say to you, I certainly get irked at the same time as other people
    consider worries that they just don’t recognize about.
    You managed to hit the nail upon the highest and also defined
    out the whole thing with no need side-effects , other folks could take a signal.
    Will likely be back to get more. Thanks

  6. Provely より:

    I’m really glad to find this site on yahoo, just what
    I was looking for. Saved to favorites.

  7. Provely review より:

    Hmm it appears like your site ate my first comment (it was super long) so
    I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog.
    I as well am an ambitious blogger yet I’m still new to everything.
    Do you have any points for beginner blog writers?
    I’d definitely appreciate it.

  8. Provely reviews より:

    I’ve been exploring for a while for excellent articles
    or blogs on this kind of area. Exploring in Yahoo I at last came across this site.
    Looking over this info made me discovered just what
    I needed. I will visit your website often.

  9. Thanks for some other fantastic post. Where else may just
    anyone get that type of information in such a perfect method of writing?
    I have a presentation next week, and I am at the search for such info.

  10. Lara escort より:

    Greetings! Very helpful advice in this particular article!
    It is the little changes that make the largest changes.

    Many thanks for sharing!

  11. Edmund より:

    I’m noot thаt much of a internet reader to be honest but your
    sitеs гeally nice, keepp it up! I’ll go ahead and bookmark your site to cߋme back in the future.

    Cheers

  12. eso buy gold より:

    Heʏ therе! I know this is kind of off tooρic ƅut I was wondering
    which blog platform are youu usіng for tһis website?
    I’m getting sick and tired of Wordρress because I’ve had problems with hackers and I’m
    looking at options for another plаtform. I would be
    great іff you could point me in the direction of a good platform.

  13. I have read so many articles or reviews about the blogger
    lovers except this article is truly a pleasant article, keep it up.

  14. Ꮤow, awesome blog ⅼayout! Hoᴡ lοng havе you been blogging
    for? you made blogging lоok easy. The overall look of y᧐ur site is magnificent, let alone the content!

  15. Saved as a favorite, I love your blog!

  16. Mayan より:

    Thanks for some other fantastic article. Where else may anybody get that knd of information in such an ideal method
    of writing? I’ve a presentation next week, and I am at the search
    for suc info.

  17. Jared より:

    I do not even understand how I stopped up right here, but I believed this publish was once good.
    I do not recognize who you are but definitely you
    are going to a famous blogger in the event you are not already.
    Cheers!cheap nfl jerseys