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

2022.1.10 更新

皆さまごきげんよう。

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

目次

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

wordpressのサイトをPWA化させてみよう

2022.1.10 更新

皆さまごきげんよう。
本日は、webサイトのpwa化をやってみましょう。

目次

1.アイコン画像を作りwordpressに設置する
2.manifest.jsonファイルを設置する
3.serviceWorker.jsを設置する
4.header.phpにファイルを読み込む記述をする
5.ホーム画面に追加してみよう
6.追記

“wordpressのサイトをPWA化させてみよう” の続きを読む

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で実装する方法” の続きを読む

ワードプレスの新エディタGutenbergが使えない場合の解決法

2022.2.12 更新

皆さま、ごきげんよう。
サイト更新しようと思ったら、いつのまにか新エディタになっていてびっくり。

とりあえず旧エディタが使えるプラグイン、その名もClassic Editorを急遽インストールしてみたものの、いずれは使わなければならないなら、今から使って無理やり慣れていくしかないだろう、ということで本日は新エディタ・Gutenbergを試してみようと思います!

“ワードプレスの新エディタGutenbergが使えない場合の解決法” の続きを読む

コンテンツをプロテクトしてくれるcss

2022.1.10 更新

皆さまごきげんよう。
以前、画像の右クリック、ドラッグ&ドロップ禁止のプラグインのご紹介をしたのですが、

画像を守るワードプレスプラグイン No Right Click Images Plugin、Easy WaterMark、Image Watermark

うちのテーマと互換性が無くなってしまったのか、原因不明なのですが、このプラグインが全く効いていないことに最近気付きました((((( ;゚Д゚)))

そこで今回は、一行でコンテンツをプロテクトしてくれるcssをご紹介します。

“コンテンツをプロテクトしてくれるcss” の続きを読む

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

2022.2.12 更新

Photo on Foter.com

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

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

目次

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

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

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

position: sticky; がスクロールで要素を固定するのに便利すぎた件

2022.1.10 更新

皆さまごきげんよう。
本日は、CSSのposition: sticky; がとても便利だったのでご紹介します(^^)

ちょっと前に当ブログでご紹介したプラグインQ2W3 Fixed Widgetですが、ワードプレスの更新をして以降、何故かエラー表示が出る様になってしまいました。

●最近入れてみたプラグイン

そこで、プラグインを頼らずに何か出来ないかと調べたところ…とても簡単にほぼ同じことが出来てしまうcssがあったんです。

それがposition: sticky;です!

“position: sticky; がスクロールで要素を固定するのに便利すぎた件” の続きを読む

画像を守るワードプレスプラグイン No Right Click Images Plugin、Easy WaterMark、Image Watermark

2022.2.6 更新

サイトにUPしたオリジナルの画像や写真などを知らず知らずに盗用されていた、なんてことになっていたら気分悪いですよね。

最近は画像の上で右クリックしたり、ドラッグアンドドロップが出来ないサイトも増えてきました。

せっかく苦労して作った画像や写真を盗用されないためにも、自分で出来る最低限の防衛対策はとっておきたいもの。

そこで本日は画像を守るプラグインをいくつかご紹介したいと思います。

プラグインをインストールするだけで簡単に出来ますので、ぜひ取り入れてみて下さい。

目次

“画像を守るワードプレスプラグイン No Right Click Images Plugin、Easy WaterMark、Image Watermark” の続きを読む

最近入れてみたワードプレスプラグイン、Q2W3 Fixed Widget、Yet Another Related Posts Plugin

2022.2.6 更新

本日は最近入れてみたプラグイン2種類、Q2W3 Fixed WidgetYet Another Related Posts Plugin の使用感をレビューいたします。

目次

“最近入れてみたワードプレスプラグイン、Q2W3 Fixed Widget、Yet Another Related Posts Plugin” の続きを読む

©2022 freyjasrm.com