最初の2つのパラメーターは、wp_enqueue_style（）の場合と同じです。次に、配列を見つけます。この配列には、依存関係、スクリプトが機能するために必要なスクリプトがリストされています。 jqueryを使用してブラウザの互換性の問題を回避することを選択したので、WordPressに使用したいことを示します。WordPressのスクリプトを適切に含めることについての記事で見たように、「jQuery」はWordPressで認識されている価値です。
4番目のパラメーターは、スクリプトのバージョン番号です。ここではそれほど重要ではありません（詳細については以前にリンクした記事を参照）が、最後のパラメーターを使用して、スクリプトがフッターに含まれるように設定する必要がありました。ヘッダーの代わりにフッターを選択する利点は、どこでもwp_enqueue_script（）を使用できることです。 wp_enqueue_style（）と同様に、wp_head（）の前に使用するという制約はありません。その後、スクリプトが必要な場合にのみスクリプトを含めることができます。カルーセルを表示した場合のみ。 したがって、wp_enqueue_script（）を配置するのに最適な場所は、display_carousel（）関数の条件です。表示するアイテムがある場合にのみカルーセルを表示します。そのため、同じ状態のスクリプトを含めます。
JavaScriptファイルを編集する準備ができました
何をしたいですか？
<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>最初に関数ですべてのコードをカプセル化します。他のライブラリとの衝突を防ぐために、WordPressはjqueryで$の使用を無効にします。この関数で再度有効にすることができます
それを移動するために、マージン左のCSSプロパティで再生します。デフォルトでは、0に設定されているため、最初のアイテムを「表示」します。最初のアイテムはカルーセルブロックを埋めるのに十分な大きさであり、その隣にある2番目のアイテムは、オーバーフロープロパティのおかげでは見えません。 2番目のアイテムを表示するには、2番目のアイテムの左側をカルーセルブロックの左側に揃えるために、ULブロックを左に移動する必要があります。これは、負の左マージンで実現できます。使用する必要がある値をテストするために、いくつかのCSSコードを試してみることができます（必要ではないので、すぐに削除します）。
<span>function display_carousel() {
</span> <span>// …
</span> <span>// Here we retrieve the links
</span> <span>// …
</span>
<span>if (!empty($links)) {
</span> <span>wp_enqueue_script(/* parameters listed above */);
</span>
<span>// …
</span> <span>// Display
</span> <span>// …
</span> <span>}
</span><span>}</span>最初に、別のアイテムを表示する関数を書きます。これは、1つのパラメーター、方向を受け入れます。前のアイテムを表示したい場合は、この方向を-1に設定する必要があり、次のアイテムを表示する場合は、1に設定する必要があります。
<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>最初の行はULブロックを取得します。後で再利用するように、変数に保存することは良い考えです。 2行目は少し奇妙に見えることがあります。目的は、現在表示されているアイテムを表す整数を保存することです。最初のアイテムは0で表され、2番目は1で表されます。 これを達成するために、マージン左のプロパティの現在の値を取得します。問題は、この値が-200％のようなものであり、数字が必要なことです。「％」を削除するには、値を整数に変換するParseInt（）関数を使用します（例：「-200％」は-200になります）。ポジティブな整数が必要なので、「マイナス」サイン（たとえば-200から200を取得するために）を追加し、100で除算して必要な値（例：200ではなく2）を取得します。
<span>function display_carousel() {
</span> <span>// …
</span> <span>// Here we retrieve the links
</span> <span>// …
</span>
<span>if (!empty($links)) {
</span> <span>wp_enqueue_script(/* parameters listed above */);
</span>
<span>// …
</span> <span>// Display
</span> <span>// …
</span> <span>}
</span><span>}</span>関数の引数に与えられた方向のおかげで、表示するアイテムのインデックスを計算できます。
新しいアイテムは存在しますか？
新しいアイテムを表示する前に、存在するかどうかをテストする必要があります。 new_linkが-1以下、またはアイテムの総数以上である場合、それは存在せず、表示できないため、ULブロックを移動することは良い考えではありません。このテストは、さらに進むことができないときに矢印が表示されないため、冗長に見えることに注意してください。
最初に、リスト内のLIタグの数であるアイテムの総数を取得します。この数は、アイテムの数以上ではないか等しくない正の整数が必要なため、上記の条件に役立ちます（1ではなく0から始めることを忘れないでください）。
最後に、ブロックの移動は単一の行で実現できます。マージン左の新しい値を計算する必要があります。それをするために、それについて考えてみましょう。 「渡された」アイテムごとに、100％の幅があります。そうすれば、マージン左の新しい値は、計算したばかりの新しいアイテム位置の100倍であり、マイナスサインが左に行くことです。
<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>ユーザーが矢印をクリックするたびに呼び出される関数を作成します。これらの関数は膨大な量のコードを必要としません。彼らが行う唯一のことは、右パラメーターを使用してcarousel_show_another_link（）関数を呼び出すことです。以下は、「前の」矢印をクリックしたときに呼び出される関数のコードです。
「次の」アイテムを表示する関数はまったく同じですが、Carousel_show_another_link（）のパラメーターとして1があります。 carousel_next_link（）。
と呼ぶことにしました イベントを添付する<span>function display_carousel() {
</span> <span>// …
</span> <span>// Here we retrieve the links
</span> <span>// …
</span>
<span>if (!empty($links)) {
</span> <span>wp_enqueue_script(/* parameters listed above */);
</span>
<span>// …
</span> <span>// Display
</span> <span>// …
</span> <span>}
</span><span>}</span>最後に、適切なイベントを適切な要素に接続することにより、これらの関数を有用にする必要があります。私たちは、私たちの要素が作成されていることを確認できるときに呼び出される新しい関数でそれを行います：ドキュメントがロードされたとき。
すべての「前の」矢印にcarousel_previous_link（）関数を添付します。カルーセルのdomの木を使用すると、CSSでスタイルをスタイリングしたいときと同じように、それらを簡単に回収できます。
このコードをテストできますが、バグが表示されます。Carousel_show_another_link（）関数が初めて呼ばれ、ULブロックのCSSプロパティマージン左が存在しないため、取得しようとするとエラーが発生します。その価値。
このバグを防ぐために、このプロパティの値を初期化できます。ドキュメントの準備が整っているとき（たとえばイベントを添付する前に）呼び出された関数には、次の行を追加します。<span>jQuery(function($) {
</span> <span>// The code we will write must be placed here
</span><span>});</span>これにより、ULブロックのマージン左のプロパティをデフォルトとして0に設定します。このプロパティは、ブロックを移動せずに存在します
これで矢をクリックすることができます。カルーセルが終了し、機能します！<span><span>#carousel ul</span> {
</span> <span>margin-left: -100%;
</span><span>}</span>このチュートリアルでは、WordPress Links Manager APIを使用してCarouselプラグインの構築を歩きました。これはこのAPIの使用の良い例でしたが、WordPressプラグインでPHP、HTML、CSS、JavaScriptを組み合わせる方法を見る良い方法でもありました。
閉じて、生成したHTMLコードを保持していても、カルーセルを構築するにはさまざまな方法があると思います。さまざまなスタイル、またはスクリプトを書くための異なる方法を選択できます。実際、ここで書いたスクリプトは単なる例であり、同じ結果を持つまったく異なるものを書くことができます。
ここで使用したコードが好きかどうかを自分で決めることができます。そうでない場合は、編集することをheしないでください！ここでやったことが気に入ったとしても、結果を強化することができます。たとえば、訪問者は他のアイテムを見るために矢印を押す必要があります。関数SettimeOut（）でカルーセルを自動的にアニメーション化することができます。
完成したコードを表示するか、自分でプラグインを試してみたい場合は、こちらからダウンロードできます。
以上がワードプレスカルーセルプラグインの構築：パート3の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
