WordPressチュートリアル
WordPressでカスタムJavaScriptを追加する方法（5つの方法）
6月
最終更新 2024年6月26日 ジェローム・ケルヴィエル
以前は、WordPressの投稿にカスタムJavaScriptを追加したい場合、コードに精通しているか、プラグインに頼らざるを得ませんでした。残念ながら、どちらの解決策も大多数のWordPressユーザーにとって理想的なものではありませんでした。前者は参入障壁が高く、何をやっているのかわからなければ危険だったし、後者はできることが非常に限られていた。
幸いなことに、AIツールの発達のおかげで、もはやそのような方法に頼る必要はない。
このチュートリアルでは、WordPressにJavaScriptを追加する5つのユニークな方法を紹介します。また、それぞれの例のコード・スニペットも紹介するので、気に入ったものを自分のウェブサイトで使うことができる。その後、Claude-3（または類似のAIツール）の無料版を使用して、独自のカスタムJavaScript機能を生成する方法を説明します。
仕事に取り掛かろう！
このチュートリアルの使い方
この記事には多くのコードが含まれているが、以下のことを明確にしておきたい。 コーディングの知識がなくても、これから紹介する情報を活用することができる。.
それぞれの例について、どのように見え、どのように振る舞うかを実演し、そしてその効果を生み出す根本的なコードを共有します。自分で使うには、次のようにすればいい：
- コードをコピーする
- 使用したいWordPressのページや記事に入る。
- 追加 カスタムHTMLブロック (下の画像のように）
- コードをブロックに貼り付ける
- ニーズに合わせてコードを修正する
最後の箇条書きに関しては、もしあなたがHTMLと/またはCSSの少なくとも軽いバックグラウンドを持っているなら、コードのカスタマイズが容易になるでしょうが、AIツールのおかげで、それは必須条件ではありません（これについてはまた後ほど）。
そのうちの1つを除いて、JavaScriptのエフェクトを見出しの中に直接表示します。つまり、基礎となるコード・スニペットには <h3> タグで、テキストが見出しであることを示します。通常の段落でこの効果を使いたい場合は、単に <h3> およびクロージング </h3> にとって <p> そして </p> それぞれだ。
例のテキストに自分のテキストを代入する以外には、これが最も基本的な調整です。しかし、特定の効果によっては、テキストの配置を左から中央に変更したり、フォントサイズを調整したりしたくなるかもしれません。コーディングの経験がない場合、最も簡単な方法は次のとおりです：
編集したコードが戻ってきたら、それを カスタムHTMLブロックそして、WordPressエディターの右上にあるプレビューボタンをクリックして、サイトのフロントエンドでどのように表示されるかを確認してください：
もし満足できれば、それは素晴らしいことだ！そうでなければ、クロードかGPTに編集を依頼すればいい。もっといいのは、具体的にどのパラメーターを微調整しているのか聞いて、希望する結果が得られるまで自分でやってみることだ。多くの場合、どちらのツールも聞かなくても教えてくれますが、万が一そうならなかったときのために念のため言っておきます。
それはさておき、例に移ろう。
WordPressでカスタムJavaScriptを使う5つの方法（スニペット付き）
JavaScriptを使えば、あなたの投稿をより魅力的なものにする、実に興味深く便利なことがたくさんできる。その可能性は非常に広いのですが、ここでは単純な使用例に限定します。
最後の例では、さらにもう1つステップを踏む必要があるが、それは複雑なことではなく、また 一般的なワードプレス の知識が必要だ。
例#1： テキストをぼかし、クリックすると表示する
☝️ ぼかしを除去するには、ぼかしたテキストをクリックします。
なかなかクールだろう？このエフェクトを実行するために使用できるコード・スニペットを以下に示します：
<h3>例#1： <span id="blurredText">テキストをぼかし、クリックすると表示する</span></h3>
<script>
const blurredText = document.getElementById('blurredText');
blurredText.style.filter = 'blur(5px)';
blurredText.style.cursor = 'pointer';
blurredText.addEventListener('click', function() {
if (blurredText.style.filter === 'blur(5px)') {
blurredText.style.filter = 'none';
} else {
blurredText.style.filter = 'blur(5px)';
}
});
</script>これをカスタムHTMLブロックにコピーし、"Blur text and reveal it upon clicking "をぼかしたいテキストに置き換えるだけです。ぼかすテキストが長い文章の一部である場合は、ぼかし効果の前の部分を "例#1" と表示されている部分に挿入します。ぼかした部分の後にテキストがある場合は、そのテキストを、閉じの </span> タグを付けている。
前節で述べたように、"S "を "M "に置き換えることを忘れないでほしい。 <h3> 開始タグと </h3> 終了タグに <p> そして </p> 通常の段落の中でエフェクトを使用する場合。
もし行き詰まったり、他の方法で修正したい場合は、Claude-3かChatGPTに頼んでください。
例#2： を "ードロブ "ードロブ "ードロブ "ードロブ "ードロブ "ードロブ
☝️ スクランブルされたテキストをクリックするとスクランブルが解除されます。
これは、パズルやページ上のクイズに最適な、とてもすてきなコンセプトです。これを実現するためのスニペットです：
<h3>例#2： <span id="scrambledPhrase">ルブセサンml a eamrblsdc drwo ro swrod</span></h3>
<script>
const scrambledPhrase = document.getElementById('scrambledPhrase');
const originalPhrase = 'Unscramble a scrambled word or words';
let unscrambledPhrase = originalPhrase.split('').sort(() => Math.random() > 0.5 ? 1 : -1).join('');
scrambledPhrase.textContent = unscrambledPhrase;
scrambledPhrase.style.cursor = 'pointer';
scrambledPhrase.addEventListener('click', function() {
scrambledPhrase.textContent = originalPhrase;
});
</script>と同じ考えだ。 <h3> タグを使用する。通常の段落の単語をスクランブルしたい場合は、その単語を <p> のタグがある。
について ルブセサンml a eamrblsdc drwo ro swrod は「スクランブルを解除する」という意味なので、ここに自分のスクランブルをかけた単語を入れます。
の右側。 オリジナルフレーズ にはスクランブルされていないバージョンを入れる。
自分でスクランブルをかけたくない場合は、Claude-3やChatGPTを使うこともできます。
例 #3：テキストを動的に変更する
このスニペットは、あなたが選んだ時間間隔でテキストを別のテキストに変更します。次の変更がいつ行われるかを示すタイマーを追加することもできますが、これはオプションです。
インターバルは自由に設定できる。
例えば、視聴者に「毎日のヒント」を提供したい場合は、24時間ごとに回転するように間隔を設定することができます。下の例では、3分ごとに更新するように設定し、次にいつ更新されるかを通知するようにしました：
ヒント：簡単なスニペットから始めて、徐々にスキルを上げていきましょう。どんなものが作れるか、きっと驚くことでしょう！
上の写真の時間までこの場所でぶらぶらしていれば、その変化がわかるだろう。
他にもいろいろと編集できることを覚えておいてほしい。
例えば、Claude-3がくれたオリジナルのバージョンでは、チップは他のテキストと全く同じように見えたので、#FFFBCCの黄色い背景を追加してコードを修正するように頼んだ。また、通知を前回の更新時の表示から次回の更新時の表示に変更してもらいました。
これらのスニペットを使うのに、コーディングの知識は必要ないということをもう一度言っておく。
以下のオリジナルのJavaScriptをコピーして、ClaudeやChatGPTに貼り付け、好きなように調整してもらうだけです。コードを手動で編集しない限り）聴衆に見せたい回転テキストを代用するために、いずれにせよこれを行う必要があります。
<style>
#dynamicTipContainer {
background-color: #FFFBCC;
padding: 10px;
border-radius: 10px;
}
.tip-text {
font-weight: bold;
margin-bottom: 5px;
}
.next-update {
font-size: 0.8em;
color: #666;
margin-bottom: 0;
}
</style>
<div id="dynamicTipContainer">
<p class="tip-text"></p>
<p class="next-update">次のアップデート <span id="dynamicTipTimestamp"></span></p>
</div>
<script>
const tipTextElement = document.querySelector('#dynamicTipContainer .tip-text');
const dynamicTipTimestamp = document.getElementById('dynamicTipTimestamp');
const tips = [
"Remember, there's often more than one way to write a JavaScript snippet. Don't be afraid to ask for clarification!",
"Always preview your post before publishing to ensure the JavaScript snippet is working as intended.",
"If you get stuck, feel free to ask for help or alternative approaches. There's no need to struggle alone!",
"Don't be discouraged if your first attempt doesn't work. Coding takes practice and patience.",
"Have fun with JavaScript! It's a powerful tool for adding interactivity to your WordPress posts.",
"Start with simple snippets and build up your skills gradually. You'll be amazed at what you can create!",
"Experiment! Try modifying the snippets and see how they behave differently.",
"Remember, you can always undo changes or revert to a previous version if something goes wrong."
];
let nextUpdateTime;
function updateTip() {
const currentTipIndex = Math.floor(Math.random() * tips.length);
tipTextElement.textContent = "Tip: " + tips[currentTipIndex];
// Set the next update time
nextUpdateTime = new Date(Date.now() + 180000);
updateTimestamp();
}
function updateTimestamp() {
dynamicTipTimestamp.textContent = nextUpdateTime.toLocaleTimeString();
// Update the timestamp every second
setTimeout(updateTimestamp, 1000);
}
updateTip();
setInterval(updateTip, 180000); // Update every 3 minutes (180000 milliseconds)
</script>⚠️ 重要事項:ひとつ注意しなければならないのは、AIがコードの修正を怠ることがあるということだ。何らかの理由で、編集したスニペットがフロントエンドで正しくプレビューされないことに気づいたら、ダブルスラッシュの後に来るノートがないかコードをチェックしてください。 //.例えば、下のスクリーンショットのようなものが表示されたら、AIがオリジナルのコードをすべて含んでいないことを意味する：
解決策は簡単だ。修正したコード・スニペット全体を返してくれるように頼むだけだ。問題は解決した。
例#4： ホバー時に表示されるツールチップの追加
☝️ 上の見出しテキストにマウスカーソルを合わせると、ツールチップが表示されます。
WordPressの投稿におけるツールチップは、様々な理由で便利です：
- メインコンテンツを散らかすことなく定義を提供する
- インタラクティブな要素でユーザーのエンゲージメントを高める
- 複雑なトピックに関する追加情報を、必要な場所に直接提供する。
以前は、これらを使用するにはプラグインに頼らなければならなかったが、今では独自のカスタムJavaScriptコードを使って同じ効果を得ることができる。
以下は、上に示したものを得るための基本的なコード・スニペットである：
<h3><span id="tooltipText" class="tooltip">例 #4：ホバー時に表示されるツールチップの追加<span class="tooltiptext">読者がこのように特定の単語やフレーズにカーソルを合わせると、追加情報が表示される。</span></span></h3>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: help;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #555;
color: #fff;
text-align: left;
padding: 10px;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -100px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>繰り返しになるが、どんな修正でも、気が向いたら手でやってもいいし、Claude-3やChatGPTに入れてもいい。
⚠️ もう一つの重要な注意事項:AIは通常、あなたが行ったどんな修正リクエストにも応えようとしますが、WordPressの内部でそれが常に機能するとは限りません。編集したJavaScriptが動作せず、不完全なコードが返ってくるのとは関係ない場合は、あなたのリクエストが不可能なだけかもしれません。
例#5：テキストにクリックオン再生のオーディオスニペットを追加する
☝️ 上の見出し文字をクリックすると、音声が再生されます。
この特別な例は、私が最近追加した2つの記事でJavaScriptを使ったものだ。
以下はそのスニペットである：
<style>
.audio-link {
font-weight: inherit;
color: inherit;
text-decoration: none;
cursor: pointer;
}
</style>
<h3><a href="javascript:void(0);" onclick="playMailSound()" class="audio-link">例#5：テキストにクリックオン再生のオーディオスニペットを追加する</a></h3>
<audio id="mailSound" src="https://themeisle.com/blog/wp-content/uploads/2024/06/audio-snippet.mp3"></audio>
<script>
function playMailSound() {
var sound = document.getElementById("mailSound");
sound.play();
}
</script>他のリストにあるものと比べてユニークなのは、それを成功させるためにひと手間加える必要があるからだ。
クリックされたテキストはMP3オーディオファイルにリンクされているので、まずそのファイルをWordPressのメディアライブラリに追加する必要があります。
これを行うには、WordPressのダッシュボードに行き、次に メディア → 新しいメディアファイルを追加:
ハードドライブからMP3ファイルを探し、アップロードします。次に URLをクリップボードにコピー:
このURLを上記のコード・スニペットに貼り付ける。 <audio id="mailSound" src=?.
を交換するのをお忘れなく。 <h3> タグは、段落や別の見出しクラスで使用する必要がある場合に使用します。
WordPressの関数で他のカスタムJavaScriptのロックを解除するヒント
先に述べたように、JavaScriptはWordPressでいろいろなことができる。深く掘り下げれば掘り下げるほど、お気に入りのプラグインの多くがJavaScriptに大きく依存していることに気づくでしょう。例えば、プラグインがライブアップデート、アニメーション、フォームバリデーション、あるいはページのリロードなしにインタラクティブな機能を提供する場合、たいていはJavaScriptが使われています。
ということを突然忘れてもいい（あるいは忘れるべき）という意味ではない。 ワードプレスプラグイン.しかし、より単純なユースケースの多くでは、また別のプラグインをインストールする必要はなく、代わりにJavaScriptに頼ることができるということだ。
この記事では5つの例しか挙げなかったが、他にもたくさんある。
それぞれの正確な手順には微妙な違いがあるかもしれませんが、この記事で取り上げたようなシンプルなエフェクトであれば、スニペットとちょっとした編集だけで動作させることができるはずです。せいぜい、プレイ・オン・クリック・オーディオの例で見たように、追加で1つか2つのステップを踏む必要があるかもしれません。
以下は、最高の結果を得るための3つのヒントである：
ヒント#1：アイデアを検証し、最初のスニペットを生成するために、よいプロンプトを使おう
これは簡単なことだ。JavaScriptは多くのことができるが、すべてをできるわけではない。まず、あなたがやろうとしていることが実際に可能であることを確認してください。これを正しく行うための鍵は、Claude-3（またはあなたが使っている類似のツール）に最初のプロンプトをうまく与え、2つのことを伝えることです：
- JavaScriptスニペットに何をさせたいか。
- コーディングの知識がない初心者が、可能な限りシンプルな解決策を探していること。
もしあなたがやろうとしていることがJavaScriptで可能でないなら、Claudeはあなたにそう伝えます。もしそれが可能であれば、クロードはおそらく最初のスニペットを生成するだろう。これが、2番目のポイントの重要性を見落とさない理由でもある。
多くの場合、JavaScriptは同じことを達成するために複数の方法で使用することができます（これについては近日中に詳しく説明します）。つまり、指示が直接的でない場合、あなたのコーディング理解度（あなたのレベルがゼロであると仮定して）を超える解決策や、動作はするが必ずしも最善の解決策ではない解決策が出てくる可能性があるということです。
ヒント#2：最初の答えを受け入れてはいけない
コーディング以外のバックグラウンドから来た場合、カスタムJavaScriptを生成することの難しい点は、提示されたものが最善のアプローチなのかどうか本当にわからないということだ。
例を挙げよう。
私はClaude-3に、以前取り上げた5つ目の例（クリックすると再生される音声テキスト）で見たようなJavaScriptスニペットを生成してくれるよう依頼した。このリクエストは、私が以前WordPressのゲートコンテンツに関する記事で作成した実際のスニペットと同じになるように表現しました。
私の要求を満たしてくれた。テストしてみましたが、問題なく動作しました。
しかし、あることに気づいた。そのコードが、実際の記事にあるコードと違っていたのだ。どちらのスニペットも機能するのだが、なぜ違うのか不思議だった。クロードに尋ねると、こんな答えが返ってきた：
説明の背後にある技術的なことは理解できなくても、その根拠は理解できる。
しかし、ここにはもっと深い教訓がある。
教訓は、提供されたカスタムスニペットが、あなたがやろうとしているJavaScript機能を実行する唯一の方法かどうかを尋ねるために、クロード（あるいはあなたが使っているどんなAIツールでも）にいつでもフォローアップできるということだ。
あるいは、2つのAIツールを同時に使って、それぞれの結果を確認することもできる。結果が異なる場合は、もう一方のコードでそれぞれを調査する。
要するに、探偵になれということだ。あなたのユースケースのシナリオに最適なソリューションを見つけるまで、掘り下げてください。
ヒント#3：適応することを恐れず、流れに身を任せる
最初のカスタムJavaScriptスニペットを生成することにして、とても良いプロンプトを作ることになったとしよう。プロンプトはうまく機能し、最初のスニペットはしっかりしたものになった。そこで、もう一度それを使うことにした。しかし、そこで何かが起こります。
慌てないで。これは普通のことだ。別の例を挙げよう。以下は、この記事の前のセクションの5つのスニペットのうちの1つを生成するときにクロードに与えた最初のプロンプトである。クロードの反応に注目してほしい：
まったく同じプロンプトをコピー＆ペーストして、他の5つのスニペットの例の1つの出発点としたが、代わりにこんな返事が返ってきた：
今回、クロードは私にいくつかの質問をすることにした。どんな質問をされようが（されなかろうが）、できる限り答えればいい。答えを知っているなら、それは素晴らしいことだ。わからなくても大した問題ではない。そのことを率直に言って、クロードと会話すればいい。クロードは順応し、最終的にはあなたがクロードに何を求めているのかを理解するだろう。
お別れの言葉
AIツールは、比較的短期間でインターネットを様々な形で変えてきた。低品質なコンテンツを送り出すために悪用されている点については、私は多くの懸念を抱いているが、裏を返せば、AIツールはインターネットをより多くのものにしたとも言える。 ワードプレスにアクセス可能 技術的なバックグラウンドを持たないユーザーでも、サイトにインタラクティブなJavaScript要素を追加することができます。これには多くの方法がありますが、今回は以下の5つを取り上げました（先ほどと同じように対話することができます）：
- テキストをぼかし、クリックすると表示する
- baUscdoのalnwblorrsmodwrd rr aec s
- ヒントJavaScriptは楽しい！(3分ごとに変わります)
- ホバー時に表示されるツールチップの追加
- テキストにクリックオン再生のオーディオスニペットを追加する
他のアイデアとしては、Claude-3、ChatGPT、またはお気に入りのAIツールを使用して、独自のカスタムスニペットを生成してください。具体的な指示のある明確なプロンプトを使うこと、他の選択肢があるかどうか聞かずにツールが最初に出した答えを受け入れないこと、そして最後に、人間との会話と同じようにその反応に合わせることを心がけてください。
