ワードプレスの任意の要素ににp5.jsを実装する

2022.1.10 更新

皆さまごきげんよう。

本日は前回の記事、「ウェブサイトの任意の要素ににp5.jsを出力する」の実践編として、ワードプレスの任意の要素にp5.jsを表示させてみようと思います!(最初から読んでみたい方はこちら↓も合わせてご覧くださいませ)

目次

  1. p5のsketch.jsファイルを用意する
  2. sketch.jsファイルをphpファイルに読み込ませる
  3. ワードプレスに外部ファイルを読み込ませる
  4. まとめ
“ワードプレスの任意の要素ににp5.jsを実装する” の続きを読む

ウェブサイトの任意の要素ににp5.jsを出力する

2022.1.10 更新

皆さまごきげんよう。

本日は前回の続き、p5.jsで作ったスケッチを任意の要素に出力してみようと思います。

前回の記事はこちら→ウェブサイトの背景画像にp5.jsを使う方法

目次

  1. p5でsketch.jsファイルを作る
  2. htmlファイルを作る
  3. 任意の要素ににp5.jsを出力する
“ウェブサイトの任意の要素ににp5.jsを出力する” の続きを読む

jQueryで背景画像を時間で切り替える

2022.2.12 更新

皆さまごきげんよう。

本日は前回の続きになりますので、ぜひご覧ください。

jQueryで画像を書き換える

jQueryでワードプレスの背景画像を時間で切り替えを実装してみます。

今回は当サイトで使用中のワードプレス公式テーマ、twenty seventeenをベースにやってみますが、調べ方や導入の仕方は大体同じなのでぜひ参考にしてみて下さい。

目次

  1. ワードプレスのテーマフォルダの中にjsファイルを作る
  2. header.phpに外部ファイルの読み込みコードを書く
  3. jsが動かない時の対処法
  4. srcとsrcsetとは
“jQueryで背景画像を時間で切り替える” の続きを読む

ワードプレスでシンタックスハイライトをJavaScriptで実装する方法

2022.2.12 更新

皆さまごきげんよう。

さて、うちのワードプレスはマルチサイトになっております。
そのせいか分かりませんが、ワードプレスのバージョンが上がるタイミングなどで、時々今まで問題なく使えていたプラグインがエラーになってしまうことがあります。

以前、コードをハイライトさせるプラグイン wp-code-highlight-js を入れて大変重宝していたのですが、久しぶりにマルチサイトの一つをメンテナンスしていると、なんとプラグインのエラー表示がヘッダーやフッターに何行も出現しているではありませんか。

もうプラグインに頼るのは諦めるしかない(´ω`。)、ということで、今回はjavascriptでシンタックスハイライトを実装してみることにしました。

“ワードプレスでシンタックスハイライトをJavaScriptで実装する方法” の続きを読む

javascriptで作ったカウントダウンタイマーをワードプレスに実装する

2022.2.12 更新

Photo on Foter.com

皆さまごきげんよう。
本日は前回作ったjavascriptのカウントダウンタイマーをワードプレスに実装してみます。
前回の記事はこちらからどうぞ↓

javascriptでカウントダウンタイマーを作る

目次

jsファイルをワードプレスに実装する

前回作ったscriptの部分を、新たにjsファイル(◯◯.js)にしてFTPサーバの任意の場所に保存します。

“javascriptで作ったカウントダウンタイマーをワードプレスに実装する” の続きを読む

javascriptでカウントダウンタイマーを作る

2022.2.12 更新

Photo on Foter.com

皆さまごきげんよう。
いきなりですが、メニューバーの右上の辺りをごらんください。
いつの間にか「2020東京五輪まであと◯日」というものが出現しております!(2022現在は万博カウントダウンに変更しております)
本日はjavascriptでカウントダウンタイマーを作ってみます。

目次

  • javascriptで時間を取得する
  • setIntervalとsetTimeoutの違い
  • jQueryでhtmlファイルに出力する
“javascriptでカウントダウンタイマーを作る” の続きを読む

jQueryでティッカーを作ってみよう

2022.1.23 更新

皆さまごきげんよう。

よく、駅などで右から左へ情報が流れてくる電光掲示板がありますよね。

ひと昔前のwebではよく見かけたアレを、今取り入れたら逆に新しいんじゃないの?ということで、 本日はjQueryで電光掲示板(ティッカー)を作ってみようと思います。

流す文章が一つのみなら css3 のアニメーションでも良いのですが、文章がいくつかあり、その文章が増えたり減ったりする場合、jQueryでプログラムを書いておくと便利なのです。

それでは早速やってみましょう。

目次

  1. css3でアニメーションの設定をする
  2. jQueryで関数を作る
  3. setTimeout関数でタイマーをセットする
“jQueryでティッカーを作ってみよう” の続きを読む

jQueryで座標を取得してみよう

2022.1.23 更新

皆さまごきげんよう。

本日はjQueryで座標を取得してみます。

今回作るものは、マウスカーソル (タッチデバイスでは指) を画面上で滑らせると、その軌跡に沿って★が描かれるというものです。

zahyo-wp01

目次


1.座標を取得するには〜offsetとclientX、clientY
2.変数を定義する
3.clone関数で要素にappendToする
4.setTimeout関数とは
5.タッチイベントとマウスイベント
6.まとめ
7.コード

“jQueryで座標を取得してみよう” の続きを読む

©2022 freyjasrm.com