キーテイクアウト

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

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

4番目のパラメーターは、スクリプトのバージョン番號(hào)です。ここではそれほど重要ではありません（詳細(xì)については以前にリンクした記事を參照）が、最後のパラメーターを使用して、スクリプトがフッターに含まれるように設(shè)定する必要がありました。

ヘッダーの代わりにフッターを選択する利點(diǎn)は、どこでもwp_enqueue_script（）を使用できることです。 wp_enqueue_style（）と同様に、wp_head（）の前に使用するという制約はありません。その後、スクリプトが必要な場(chǎng)合にのみスクリプトを含めることができます。カルーセルを表示した場(chǎng)合のみ。 したがって、wp_enqueue_script（）を配置するのに最適な場(chǎng)所は、display_carousel（）関數(shù)の條件です。表示するアイテムがある場(chǎng)合にのみカルーセルを表示します。そのため、同じ狀態(tài)のスクリプトを含めます。

JavaScriptファイルを編集する準(zhǔn)備ができました

何をしたいですか？

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

最初に関數(shù)ですべてのコードをカプセル化します。他のライブラリとの衝突を防ぐために、WordPressはjqueryで$の使用を無(wú)効にします。この関數(shù)で再度有効にすることができます

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

それを移動(dòng)するために、マージン左のCSSプロパティで再生します。デフォルトでは、0に設(shè)定されているため、最初のアイテムを「表示」します。最初のアイテムはカルーセルブロックを埋めるのに十分な大きさであり、その隣にある2番目のアイテムは、オーバーフロープロパティのおかげでは見(jiàn)えません。 2番目のアイテムを表示するには、2番目のアイテムの左側(cè)をカルーセルブロックの左側(cè)に揃えるために、ULブロックを左に移動(dòng)する必要があります。これは、負(fù)の左マージンで実現(xiàn)できます。使用する必要がある値をテストするために、いくつかの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ピクセルを左に移動(dòng)します。たとえば、左に移動(dòng)します。カルーセルの幅は900ピクセルの幅であるため、上記のCSSで示した値を使用すると、-900pxの値で2番目のアイテムを表示できます。 ただし、代わりにパーセンテージを使用できます。利點(diǎn)は、この割合がコンテナに関連していることです。ここでは、「100％」は「900ピクセル」に等しいため、-100％の値を與えると、最初のアイテムを非表示にして2番目のアイテムを表示します。パーセンテージを使用すると、マージン左のプロパティの値を変更せずに、コンテナの幅を変更できます。

別のアイテムを表示する関數(shù)

最初に、別のアイテムを表示する関數(shù)を書(shū)きます。これは、1つのパラメーター、方向を受け入れます。前のアイテムを表示したい場(chǎng)合は、この方向を-1に設(shè)定する必要があり、次のアイテムを表示する場(chǎng)合は、1に設(shè)定する必要があります。

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

どこに行きますか？

マージン左に割り當(dāng)てる値を決定するには、自分がどこにいるかを知る必要があります。これを達(dá)成するためのいくつかの可能な方法があり、私はマージン左のプロパティの現(xiàn)在の値のみを使用するものを選択しました。

最初の行はULブロックを取得します。後で再利用するように、変數(shù)に保存することは良い考えです。 2行目は少し奇妙に見(jiàn)えることがあります。目的は、現(xiàn)在表示されているアイテムを表す整數(shù)を保存することです。最初のアイテムは0で表され、2番目は1で表されます。 これを達(dá)成するために、マージン左のプロパティの現(xiàn)在の値を取得します。問(wèn)題は、この値が-200％のようなものであり、數(shù)字が必要なことです?！福ァ工蛳鞒工毪摔?、値を整數(shù)に変換するParseInt（）関數(shù)を使用します（例：「-200％」は-200になります）。ポジティブな整數(shù)が必要なので、「マイナス」サイン（たとえば-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（ 'マージン左'）を使用して左右のプロパティの価値を取得しなかった理由を疑問(wèn)に思うかもしれません。実際、.css（）はjqueryメソッドであり、私たちの文脈では、より良いアイデアのようです。問(wèn)題は、この方法でパーセンテージを與えないことです。上記と同じ?jìng)帳蚴褂盲筏?、現(xiàn)在のアイテムが3番目のアイテムである場(chǎng)合、マージン左のプロパティは-200％に設(shè)定され、.css（）メソッドは-1800pxを返します。この値をピクセルで使用して現(xiàn)在のアイテムを計(jì)算するには、大きなコンテナの幅を使用する必要があります。ULブロックのみを使用することを好みます。

関數(shù)の引數(shù)に與えられた方向のおかげで、表示するアイテムのインデックスを計(jì)算できます。

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

新しいアイテムを表示する前に、存在するかどうかをテストする必要があります。 new_linkが-1以下、またはアイテムの総數(shù)以上である場(chǎng)合、それは存在せず、表示できないため、ULブロックを移動(dòng)することは良い考えではありません。このテストは、さらに進(jìn)むことができないときに矢印が表示されないため、冗長(zhǎng)に見(jiàn)えることに注意してください。

最初に、リスト內(nèi)のLIタグの數(shù)であるアイテムの総數(shù)を取得します。この數(shù)は、アイテムの數(shù)以上ではないか等しくない正の整數(shù)が必要なため、上記の條件に役立ちます（1ではなく0から始めることを忘れないでください）。

新しいアイテムの表示

最後に、ブロックの移動(dòng)は単一の行で実現(xiàn)できます。マージン左の新しい値を計(jì)算する必要があります。それをするために、それについて考えてみましょう。 「渡された」アイテムごとに、100％の幅があります。そうすれば、マージン左の新しい値は、計(jì)算したばかりの新しいアイテム位置の100倍であり、マイナスサインが左に行くことです。

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

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

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

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

「次の」アイテムを表示する関數(shù)はまったく同じですが、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>

最後に、適切なイベントを適切な要素に接続することにより、これらの関數(shù)を有用にする必要があります。私たちは、私たちの要素が作成されていることを確認(rèn)できるときに呼び出される新しい関數(shù)でそれを行います：ドキュメントがロードされたとき。

すべての「前の」矢印にcarousel_previous_link（）関數(shù)を添付します。カルーセルのdomの木を使用すると、CSSでスタイルをスタイリングしたいときと同じように、それらを簡(jiǎn)単に回収できます。

その後、carousel_next_link（）関數(shù)を右矢?。?carousel li a.carousel-next）に同じ方法で添付できます。

このコードをテストできますが、バグが表示されます。Carousel_show_another_link（）関數(shù)が初めて呼ばれ、ULブロックのCSSプロパティマージン左が存在しないため、取得しようとするとエラーが発生します。その価値。

このバグを防ぐために、このプロパティの値を初期化できます。ドキュメントの準(zhǔn)備が整っているとき（たとえばイベントを添付する前に）呼び出された関數(shù)には、次の行を追加します。

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

これにより、ULブロックのマージン左のプロパティをデフォルトとして0に設(shè)定します。このプロパティは、ブロックを移動(dòng)せずに存在します

これで矢をクリックすることができます。カルーセルが終了し、機(jī)能します！

<span><span>#carousel ul</span> {
</span>	<span>margin-left: -100%;
</span><span>}</span>

結(jié)論

このチュートリアルでは、WordPress Links Manager APIを使用してCarouselプラグインの構(gòu)築を歩きました。これはこのAPIの使用の良い例でしたが、WordPressプラグインでPHP、HTML、CSS、JavaScriptを組み合わせる方法を見(jiàn)る良い方法でもありました。

閉じて、生成したHTMLコードを保持していても、カルーセルを構(gòu)築するにはさまざまな方法があると思います。さまざまなスタイル、またはスクリプトを書(shū)くための異なる方法を選択できます。実際、ここで書(shū)いたスクリプトは単なる例であり、同じ結(jié)果を持つまったく異なるものを書(shū)くことができます。

ここで使用したコードが好きかどうかを自分で決めることができます。そうでない場(chǎng)合は、編集することをheしないでください！

ここでやったことが気に入ったとしても、結(jié)果を強(qiáng)化することができます。たとえば、訪問(wèn)者は他のアイテムを見(jiàn)るために矢印を押す必要があります。関數(shù)SettimeOut（）でカルーセルを自動(dòng)的にアニメーション化することができます。

完成したコードを表示するか、自分でプラグインを試してみたい場(chǎng)合は、こちらからダウンロードできます。

以上がワードプレスカルーセルプラグインの構(gòu)築：パート3の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。