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

カルーセルは単なるリンクのリストではなく、リンクをより魅力的な方法でアイテムとして表示するために存在します。以前の記事では、カルーセルの作成方法と、必要なHTML要素を表示する方法を見ました。さあ、WordPress Carouselプラグインを構築してスタイルする時が来ました。

私たちのカルーセルは現在、リンクの簡単なリストです。この記事の終わりまでに、適切にフォーマットされたカルーセルがあります。パート1のサンプル画像に表示された結果を表示するために必要なスタイルを適用する方法を確認します。もちろん、カスタマイズできる多くのプロパティがあります。ウェブサイトは世界中で同じである必要はありません。

最初に、CSSファイルをWordPress内のWebページに適切にリンクする方法について説明します。次に、要素をスタイリングします。これにより、さまざまな状況で役立つCSSトリックがいくつか実証されます。

キーテイクアウト

WordPress Carouselプラグインは、外部CSSファイルをリンクすることで強化されます。これにより、より簡単で柔軟なスタイリングが可能になります。これには、ファイルを含めるためのwp_enqueue_style（）関数が含まれます。

カルーセルのサイズはCSSファイルで定義されており、各アイテムが作成されたブロック全体を埋めます。リンクの配置とコンテナのサイズも確立されています。
• アイテムの名前、説明、矢印のスタイリングは、ディスプレイ、パディング、色、背景、テキストアライグ、テキスト-ShadowなどのCSSプロパティを使用してカスタマイズされています。
JavaScriptを追加して矢印を機能させることでCarouselプラグインが完了し、矢印がクリックされたときにスクロールできるようにします。これは、チュートリアルの次の部分で説明されます。
• 外部CSSファイルをリンク
カルーセルのスタイリングを可能な限り柔軟で簡単にするために、インラインスタイルの使用は、各アイテムの背景である1つの属性のみに制限されました。他のすべてのスタイルでは、外部CSSファイル（StyleSheet）を使用します。ファイル（carousel.cssなど）の独自の名前を選択して、プラグインのフォルダー（またはサブディレクトリ）に配置できます。 ファイルを含めるには、スクリプトを含めるための正しい方法に関する記事で説明されているように、wp_enqueue_style（）関数を使用します。
• この関数をどこでも呼び出すことはできません。WP_Head（）の呼び出しの前に呼び出される必要があります（スクリプトとは異なり、フッターにCSSファイルを含めることはできません！）。 wp_enqueue_scriptsを使用できます。これは、WordPressが現在のページ（フロントエンド）のスクリプトとスタイルが含まれている場合に呼び出されるため、このアプリケーションに最適です。
以下のコードは、プラグインのメインファイルに表示する必要があります。

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

wp_enqueue_style（）関数は（少なくとも）2つのパラメーター、スタイルの名前と対応するファイルへのURIを受け入れます。私のcarousel.cssファイルはこのフォルダーのルートにあるため、plugin_dir_url（）関数はプラグインのフォルダーにURLを提供します。ここに追加するサブディレクトリはありませんが、使用する場合は連結する必要があります。

関数内の何もテストしていないことに注意してください。 WordPressには、すべてのページにCSSファイルが含まれます。すべてのページにカルーセルを表示する場合、これは問題ではありません。ただし、いくつかのページにのみカルーセルを表示する場合（例：ホームページでのみ）、CSSファイルを含める前に訪問者が正しいページにあるかどうかをテストする必要があります（例：is_home（））。

今度は、CSSファイルを編集します。

カルーセルのスタイル！

カルーセルのサイズ

メインコンテナのサイズ、＃Carouselによって識別されるDivから始めます。ここでは、必要なサイズを設定できます。サイズ変更しない画像を使用するため、固定サイズは良い考えです。

後で、このコンテナに3番目のプロパティをオーバーフローします。今のところ、私たちはそれを使用しません。そうすれば、ページ全体にアイテムがどのように配置されているかを見ることができます。

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

各アイテムは、作成したばかりのブロック全体を埋めます。次のルールは、アイテム自体（クラス名Carousel-LinkのあるAタグ）とその両親に適用されます。

リンクの配置

右に行くとどうなりますか？

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

今、私たちは何をしたいのかを考えなければなりません。カルーセルを構築したい場合は、多くの可能性があります。フロートプロパティを使用して、隣にアイテムを大きな容器に配置することをお勧めします。すべてのアイテムを1行に含めるのに十分な大きさでなければなりません。

ユーザーが別の画像を表示したい場合、このコンテナを移動して、次のアイテムを#Carousel Divに合わせます。このdivには、プロパティオーバーフローが隠されているため、他のリンクが表示されません。 以下は、私たちが作りたいもののスキーマです。緑色では、すべてのリンクが1行にある大きな容器を見ることができます。右側のリンクを確認するために、コンテナが左に進み、その逆も同様です。黒いフレームは#Carousel Div：このフレームの外では、すべてが見えないものです。

コンテナのサイズ

最初に、コンテナ：UL 1は目的に最適であるため、別のHTML要素を作成しません。この容器は、すべてのリンクを1行に含めるのに十分な大きさでなければならないことがわかりました。現在、これは事実ではありません。アイテムとコンテナの両方が900ピクセルの幅です。

それを変更するために、容器の幅を500％に増やします。 #Carouselによって識別されたDIVの幅は900ピクセルであるため、500％の幅を使用すると、5つのリンクを連続して表示できます。

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

ここでは潜在的な問題が発生する可能性があります。たとえば、スクリプトは実際には3つのアイテムのみを表示できるため、アイテムの数は変動する場合があります。アイテムの数を最大5つに制限しているため、実際には問題ではありません。そのため、たとえ3つしかフィットしない場合でも、ブランクスペースはカルーセルの動作を妨げません。

別の制限を選択した場合、この幅を変更する必要があります（たとえば、10を表示する場合は1000％に）。制限が必要ないときに問題が現れます。この場合、表示するアイテムの数を含む$ n変数に基づいて、ULタグのスタイル属性の幅を設定する必要があります。

リンクの配置

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

ここで、LIタグの幅を修正する必要があります。現在、それらは100％に設定されているため、5倍の長さのコンテナの幅全体を取得します。

Liタグには適切な幅があり、浮いています。今すぐカルーセルをテストすると、適切な結果が表示されます。オーバーフロープロパティを#carouselに追加して、表示されないものを非表示にすることができます。

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

アイテムの名前と説明

アイテムの名前は、あなたが望むようにスタイリングできます。ここで、このチュートリアルの前の部分で見たスタイルをどのように作成したかを説明します。

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

リマインダーとして、アイテムの名前はA.Carousel-Link要素の強いタグに表示されます。ストリップは背景色で取得できますが、このストリップが幅全体を占めることを望んでいます。それを行うために、ディスプレイをブロックするように設定できます。パディングとカラープロパティはスタイルを完成させます

名前と同様に、アイテムの説明をパーソナライズできます。ここでは、下のCSSを使用して、名前の下の右側に表示することにしました。

ディスプレイプロパティのブロック値により、EMタグは利用可能なすべての幅を使用できます。次に、右側のテキストをパディングで揃えて、テキストがエッジに対して難しくないようにします。ここでは、テキストの色に濃い灰色を選びました。テキストが常に読みやすくなることを確認するために、暗い画像でも、白いテキストの影を追加しました。

矢印のスタイリング

<span><span><span><ul style="width: <?php echo $n * 100; ?></span>%;"></span></span>

最後のステップは、矢印を正しく表示することです。これらの矢印を表示する場所に応じて、ここにはいくつかの選択肢があります。

以下にリストされているプロパティを使用して、サンプル項目への影響を実現しました。矢印をブロックに変換してサイズを変更できるようにし、このサイズを修正し、矢印をスタイリングします。また、有用なトリックを使用してテキスト（矢印）を垂直に揃え、高さと同じ値にラインハイトプロパティを設定し、テキストは垂直に中央に配置されます。

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

丸い角を繁殖させるには、国境と角質を使用しますが、すべてのコーナーではなく、カルーセル側にあるものは丸くないはずです。だからこそ、ボーダーラジウスの「サブプロパティ」を使用して、コーナーを丸くすることができます。

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

最後に、私は個人的にはボタンとリンクが好きで、ホバー効果があります。ここでは、矢の色のみを変更することを選択しました。

CSS3がソフトな移行を簡単にすることができるように、それらを使用してみませんか？

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

矢印の配置

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

それはすべて矢印のスタイルのためです。今、私たちはそれらを望む場所にそれらを配置する必要があります。ちょっとしたトリックで絶対的なポジショニングを使用します。カルーセル自体の位置がわかりませんので、スクリーンコーナーから矢印を配置できません。代わりに、カルーセルの角を使用し、より正確には、cornersをタグ付けします。

矢印を絶対に設定して矢を置いてみましょう。

これを試してみると、矢印は画面側に配置されます。絶対的な位置決めのあまり知られていないオプションを使用する必要があります。矢印要素は、最も近い配置された親に対して配置されます。ここで、私たちの矢印には配置された親がいないので、画面に関連して配置されます。

<span><span><span><ul style="width: <?php echo $n * 100; ?></span>%;"></span></span>

問題は、親が正しい場所にいる矢印です。私たちはそれらのいずれも動きたくありません。トリックは、他の何も変更せずに相対的なポジショニングを使用することで構成されています。私たちの矢の最も近い親であるLIタグに相対的な位置を適用します。

矢印は、最も近い配置された親、LIタグの側面に配置されます。これが私たちが望んでいたものです。

次は何ですか？

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

カルーセルが必要とするHTML要素が表示され、今ではスタイルも表示されています。問題は、私たちのカルーセルが最初の項目を示すだけなので、私たちのカルーセルはまったく役に立たないことです（CSSなしでより便利でした！）

） そのため、最後のものを追加する必要があるのはそのため、JavaScriptです。このチュートリアルの次の（および最後の）部分では、矢印が予想どおりに機能し、矢印がクリックされるとリンクがスクロールされます。それは良いことですよね？

以上がワードプレスカルーセルプラグインの構築：パート2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。