ワードプレスカルーセルプラグインの構築：パート3

キーテイクアウト

カルーセル矢印を機能させるために、javaScriptファイルが作成され、wp_enqueue_script（）関数を使用してWordPressにリンクします。これは、display_carousel（）関数条件に配置され、カルーセルが表示されたときにのみ含まれることを確認します。 >
• カルーセルのULブロックは、マージン左のCSSプロパティを調整することにより、さまざまなアイテムを表示するために水平に移動します。負の左マージンは、次のアイテムの左側をカルーセルブロックの左側に合わせます。
関数、carousel_show_another_link（）は、方向パラメーターに基づいて別のアイテムを表示するために作成されます（以前のアイテムの-1、次のアイテムの場合は1）。 ULブロックを移動する前に存在するかどうかを表示する新しいアイテムのインデックスを計算し、チェックします。 2つの関数、carousel_previous_link（）とcarousel_next_link（）は、それぞれの矢印イベントに作成され、添付され、適切なパラメーターを使用してcarousel_show_another_link（）関数を呼び出します。ドキュメントの準備ができたときに、ULブロックのマージン左プロパティを0に初期化することにより、バグが防止されます。
• スタイリングなしでは、このチュートリアルの最初の部分で構築したWordPress Carouselは、アイテムのリストにすぎませんが、少なくともそれらが目に見えるという意味では有用です。このチュートリアルのパート2で追加したCSSは、カルーセルの表示を強化しましたが、問題は最初のアイテムのみがユーザーに表示され、残りのアイテムを表示する方法がないことです。
カルーセルに矢印を追加して、ユーザーが異なるアイテムの間をナビゲートできるようにします。今度は、JavaScriptを少し使用できるようにします。 このチュートリアルの継続では、スクリプトを適切に含める方法を学び、ユーザーが矢印にヒットしたときにアイテムをアニメーション化する関数を起動するスクリプトを書きます。 JavaScriptファイルをリンク
• ここでは、JavaScriptを使用して矢印を便利にします。 CSSパーツについては、新しいファイルを作成します。私はそれをcarousel.jsと呼び、プラグインのフォルダーのルートに配置しました。
javaScriptファイルを使用していることをWordPressに示す必要があります。これを行うには、wp_enqueue_script（）関数を使用します

最初の2つのパラメーターは、wp_enqueue_style（）の場合と同じです。次に、配列を見つけます。この配列には、依存関係、スクリプトが機能するために必要なスクリプトがリストされています。 jqueryを使用してブラウザの互換性の問題を回避することを選択したので、WordPressに使用したいことを示します。WordPressのスクリプトを適切に含めることについての記事で見たように、「jQuery」はWor​​dPressで認識されている価値です。

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で$の使用を無効にします。この関数で再度有効にすることができます

HTMLコードを変更しなくても、カルーセルを作るにはさまざまな方法があります。ここでは、ULブロックを移動することをお勧めします。すべてのアイテムが連続して含まれているため、その位置を設定することで1つまたは別のアイテムを表示するために水平に移動できます。このチュートリアルの前の部分で既に見た以下のスキーマを参照して、私たちがやりたいことを確認してください。

それを移動するために、マージン左の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>

この単純な行は説明に値します。テストすると、最初のアイテムが表示されないことがわかります。代わりに2番目のアイテムが表示されます。別の値をテストして、何が起こったのかをよりよく理解できます。 -50pxでは、ULブロック50ピクセルを左に移動します。たとえば、左に移動します。カルーセルの幅は900ピクセルの幅であるため、上記のCSSで示した値を使用すると、-900pxの値で2番目のアイテムを表示できます。 ただし、代わりにパーセンテージを使用できます。利点は、この割合がコンテナに関連していることです。ここでは、「100％」は「900ピクセル」に等しいため、-100％の値を与えると、最初のアイテムを非表示にして2番目のアイテムを表示します。パーセンテージを使用すると、マージン左のプロパティの値を変更せずに、コンテナの幅を変更できます。

別のアイテムを表示する関数

最初に、別のアイテムを表示する関数を書きます。これは、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>

ul.css（ 'マージン左'）を使用して左右のプロパティの価値を取得しなかった理由を疑問に思うかもしれません。実際、.css（）はjqueryメソッドであり、私たちの文脈では、より良いアイデアのようです。問題は、この方法でパーセンテージを与えないことです。上記と同じ値を使用して、現在のアイテムが3番目のアイテムである場合、マージン左のプロパティは-200％に設定され、.css（）メソッドは-1800pxを返します。この値をピクセルで使用して現在のアイテムを計算するには、大きなコンテナの幅を使用する必要があります。ULブロックのみを使用することを好みます。

関数の引数に与えられた方向のおかげで、表示するアイテムのインデックスを計算できます。

新しいアイテムは存在しますか？

新しいアイテムを表示する前に、存在するかどうかをテストする必要があります。 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>

ここではjqueryアニメーションを使用することを選択しましたが、独自のアニメーションを自由に作成したり、これの設定を変更したりすることもできます。 より実用的な使用のためのいくつかのエイリアス

ユーザーが矢印をクリックするたびに呼び出される関数を作成します。これらの関数は膨大な量のコードを必要としません。彼らが行う唯一のことは、右パラメーターを使用してcarousel_show_another_link（）関数を呼び出すことです。以下は、「前の」矢印をクリックしたときに呼び出される関数のコードです。

return falseに注意してください。矢印のデフォルトの動作を防ぐため（リンクであることを忘れないでください）。そうすれば、ユーザーが矢印をクリックしてもURLは変更されません。

「次の」アイテムを表示する関数はまったく同じですが、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_next_link（）関数を右矢印（#carousel li a.carousel-next）に同じ方法で添付できます。

このコードをテストできますが、バグが表示されます。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 サイトの他の関連記事を参照してください。