WordPressへのCSSアニメーションの追加

公開: 2022-07-11

アニメーションは、Webページにとって魅力的で視覚的に興味深い機能です。ただし、FlashまたはJavaScriptを使用してアニメーションを作成すると、サイトのリソースのかなりの部分が消費されます。

幸い、代わりにカスケードスタイルシート（CSS）を使用してWordPressWebサイトにアニメーションを追加できます。このコーディング言語を使用すると、サイトに無制限のアニメーションを組み込むことができますが、それでも比較的親しみやすく、習得が容易です。

この記事では、CSSアニメーションがどのように機能するか、およびプラグインの有無にかかわらず、CSSアニメーションプロパティをWebサイトに追加する方法について説明します。動きましょう！

1. CSSアニメーションはどのように機能しますか？（そしてなぜあなたはそれらを使うべきなのか）

2.プラグインを使用したCSSアニメーションの追加

2.1。ステップ1：CSSアニメーションプラグインをインストールしてアクティブ化する

2.2。ステップ2：アニメーションをデザインする

2.3。ステップ3：遅延と速度をカスタマイズする

2.4。ステップ4：アニメーションを保存してプレビューする

3.プラグインなしでCSSアニメーションを追加する

3.1。ステップ1：関連するCSSプロパティを理解する

3.2。ステップ2：animate.cssファイルを作成する

3.3。ステップ3：animate.cssファイルをサイトにアップロードする

3.4。ステップ4：functions.phpを介してAnimateスタイルシートを呼び出す

3.5。ステップ5：CSSクラスを使用してアニメーションを適用する

4.WPエンジンでサイトの見栄えを良くする

CSSアニメーションはどのように機能しますか？（そしてなぜあなたはそれらを使うべきなのか）

CSS3を使用すると、ユーザーは要素（画像やボタンなど）のスタイルを時間の経過とともに変更してアニメーションを作成できます。要素のCSSプロパティは、必要な回数だけ変更できます。

FlashやJavascriptアニメーションとは異なり、CSSアニメーションはブラウザの互換性の問題や複雑なコーディングを回避します。これにより、パフォーマンスの低下などの悪影響を与えることなく、重要な機能に注意を向けることができます。

プラグインを使用したCSSアニメーションの追加

コーディングスキルに自信がない場合は、私たちが対応します。代わりに、プラグインを使用してCSSアニメーションを簡単に作成できます。

ステップ1：CSSアニメーションプラグインをインストールしてアクティブ化する

開始するには、CSSアニメーションプラグインをインストールする必要があります。ブロックアニメーション：グーテンベルクブロック用のCSSアニメーションを使用しています。これは、ブロックエディター用に特別に作成された比較的新しいツールです。

このプラグインは、WordPressダッシュボードの[プラグイン]>[新規追加]に移動して見つけることができます。それを見つけたら、[今すぐインストール]をクリックしてから[アクティブ化]をクリックします。

アクティベーションが完了したら、簡単なアニメーションを含める投稿またはページに移動します。

ステップ2：アニメーションをデザインする

次に、アニメーション化する要素をクリックします。サイドバーの[ブロック]タブで、[アニメーション]というラベルの付いたセクションを探します。これは、手順1でプラグインをアクティブ化したときに追加されたものです。 ここに、いくつかの異なる効果を一覧表示するドロップダウンメニューが表示されます。

コンテンツに合ったアニメーションオプションを見つけたいだけ、さまざまなアニメーションオプションを試してみることができます。

ステップ3：遅延と速度をカスタマイズする

Blocks Animationプラグインには、アニメーションの遅延と速度をカスタマイズするためのタイミング関数も付属しています。

これら2つの設定の最初の設定は、アニメーションの開始を延期します。これは、ページが読み込まれた後に要素に注意を引くのに役立つ場合があります。または、後で説明するように、アニメーションを組み合わせて使用できるようにする場合もあります。アニメーションの遅延プロパティは、5秒まで設定できます。

速度ドロップダウンを使用して、アニメーションを低速、低速、高速、または高速にすることができます。遅いアニメーションは訪問者にとってより微妙で不快感が少ないかもしれませんが、速いアニメーションは彼らの注意を引くためにより多くのことをします。

ステップ4：アニメーションを保存してプレビューする

投稿またはページを下書きとして保存し、アニメーション要素をプレビューしてから公開することをお勧めします。 1つのページで複数のCSSアニメーションを操作している場合は、アニメーション名プロパティも必ず保存してください。アニメーションは非常に便利ですが、気が散ってページが乱雑に感じられる可能性もあります。

ページをプレビューし、アニメーションを比較的単純に保つことで、これらの望ましくない結果を防ぐことができます。以下に、完成したCSSアニメーションの例を示します。これは、アニメーション画像と前の手順でスタイルを設定したボタンを組み合わせたものです。

アニメーションが他のコンテンツに合わない場合や、希望する効果が得られない場合は、ブロックエディタに戻って調整するだけです。それがCSSアニメーションプラグインを使用することの美しさです–それは素早く簡単です。

プラグインなしでCSSアニメーションを追加する

テーマのファイルを編集することに慣れている場合は、プラグインなしでカスタムアニメーションを手動で作成できます。コーディングのノウハウが少し必要なので、このソリューションは開発経験のある人に任せるのが最善かもしれません。

始める前に、必ずサイトをバックアップしてください。子テーマを使用することも賢明です。そうすれば、必要に応じてテーマのデフォルトファイルに簡単に戻すことができます。

ステップ1：関連するCSSプロパティを理解する

実際に編集を行う前に、CSSアニメーションを作成するときに覚えておくべき8つの重要なプロパティがあります。

@keyframes：アニメーションを通じて要素に適用されるスタイルを指定します。
Animation-name：コード内の他の場所でアニメーションを参照するために使用できる名前を作成します。
Animation-duration：アニメーションを実行する時間を定義します。
Animation-delay：ページがロードされてからアニメーションが開始するまでの待機時間を示します。
Animation-iteration-count：アニメーションを実行する回数を記録します。
アニメーション-方向：アニメーションを実行する方向を示します。
Animation-Timing-Function：アニメーションの速度曲線を決定します。
Animation-fill-mode：アニメーションが再生されていないときの要素のスタイルを指定します。
アニメーション：キーフレームを要素にバインドするための省略形のプロパティ。

これらのプロパティの中で最も重要なのは、「キーフレーム」です。この用語は、メインフレームがキーフレームと呼ばれ、他のフレームがキーフレームに出入りするように描かれた手描きのアニメーションプロセスに由来します。

CSSアニメーションでは、キーフレームは何がいつ発生するかを指定します。たとえば、これを見てください。

 @keyframesの例{
 0％{背景色：赤;}
 25％{背景色：黄色;}
 50％{背景色：青;}
 100％{背景色：緑;}
 }

上記のキーフレームは、アニメーションの25％で、指定された要素の背景色が赤から黄色に変わることを示しています。パーセンテージは通常、アニメーションのタイミングを定義するために使用されます。ただし、fromとtoは、それぞれ0％と100％の代わりに使用できます。

ステップ2： animate.cssファイルを作成する

CSSアニメーションを追加するには、上記のプロパティを使用して、好みのテキストエディタでファイルを作成する必要があります。使用するアニメーションのキーフレームを含める必要があります。次に、それらを特定のCSSクラスにバインドして、サイトの要素に適用できるようにします。

これが例です。以下のコードでは、最初に、変換プロパティと可視性プロパティを使用してCSSキーフレームアニメーションを作成します。これにより、画面の右側から要素をスライドさせることができます。

 @keyframes slideInRight {
から {
-webkit-transform：translate3d（100％、0、0）;
変換：translate3d（100％、0、0）;
可視性：可視;
}
に {
-webkit-transform：translate3d（0、0、0）;
変換：translate3d（0、0、0）;
}
}

次に、そのキーフレームをCSSクラスにバインドする必要があります。この場合、slideInRightという名前になっています。このコードは、ファイル内の上記のキーフレームの直後に配置されます。

 .slideInRight {
 -webkit-animation-name：slideInRight;
 アニメーション名：slideInRight;
 }

このプロセスを繰り返して、必要な数のアニメーションを作成できます。次に、ファイルをanimate.cssとして保存します。 または、人気のあるAnimate.cssファイルをダウンロードすることもできます。多数の人気のあるアニメーションのキーフレームとCSSクラスが含まれているため、独自の複雑なアニメーションをコーディングする必要はありません。

ステップ3： animate.cssファイルをサイトにアップロードする

animate.cssファイルが完成したら、テーマのディレクトリにアップロードする必要があります。これを行うには、ファイル転送プロトコル（FTP）とFileZillaなどのFTPクライアントを使用してサイトにアクセスします。ホスティングアカウントで必要な資格情報を見つけることができます。

public_htmlディレクトリに入り、 wp-content> themesに移動して、アクティブなテーマ（または子テーマ）のフォルダを見つける必要があります。

cssというラベルの付いたサブディレクトリを探します。存在する場合は、 animate.cssファイル（またはAnimate.cssのanimate.mini.cssファイル）をアップロードします。このフォルダがまだない場合は、新しいサブディレクトリを簡単に作成して、それに応じて名前を付けることができます。

ファイルが正常にアップロードされたら、すぐにFTPクライアントを離れないでください。 WordPressサイトでこのスタイルシートにアクセスするには、ファイルを少し編集する必要があります。

ステップ4： functions.phpを介してAnimateスタイルシートを呼び出す

次に、アクティブなテーマのフォルダーで、 functions.phpファイルを見つけます。最後に、次のコードスニペットを追加します。

 add_action（'wp_enqueue_scripts'、'wpb_animate_styles'）;
関数wpb_animate_styles（）{
 wp_enqueue_style（'animate-css'、get_stylesheet_directory_uri（）。'/css/animate.css'、 '3.5.0'、'all'）;
}

Animate.cssからanimate.min.cssファイルをアップロードした場合は、最後の行でanimate.cssの代わりにanimate.min.cssを使用する必要があることに注意してください。

これにより、テーマがアップロードしたスタイルシートを呼び出すことができるため、テーマ内のクラスをサイトの要素に適用できます。変更が保存されたら、WordPressダッシュボードに戻ります。

ステップ5：CSSクラスを使用してアニメーションを適用する

これで、 animate.cssファイルの任意のクラスを投稿やページの要素に適用できます。 Animate.cssファイルを使用している場合は、GitHubで含まれているすべてのファイルの完全なリストを参照できます。

アニメーション化する要素を含む投稿またはページに移動します。クラシックエディタで、テキストエディタに切り替えます。ブロックエディタを使用している場合は、ブロックツールバーから3つのドットのアイコンをクリックし、[ HTMLとして編集]を選択します。

次に、アニメーションクラスとアニメーションのクラスを要素タグに追加します。

最後に、投稿またはページをプレビューします。これでアニメーションが機能するはずです。

このプロセスを適応させて、 animate.cssファイルに任意のアニメーションを組み込むことができます。

WPエンジンでサイトの見栄えを良くする

アニメーションなどの視覚的に興味深い機能を使用すると、サイトの訪問者を引き付け、よりプロフェッショナルなオンラインプレゼンスを実現できます。ここWPエンジンでは、WordPress開発者に最高のヒントとコツを提供することに誇りを持っているので、サイトは常に最高に見えます。

私たちの一流のホスティングプラットフォームと組み合わせると、ユーザーを感動させるために必要なすべてのツールを手に入れることができます。今日の私たちの計画をチェックしてください！