3 つの簡単なステップで WordPress ギャラリー テーマを作成する
公開: 2022-10-22WordPress ギャラリー テーマは、写真や画像をオンラインで紹介するのに最適な方法です。 ギャラリー テーマを作成するにはさまざまな方法がありますが、最も一般的な方法は、NextGEN Gallery のようなプラグインを使用することです。 WordPress ギャラリー テーマの作成は非常に簡単なプロセスですが、留意すべき点がいくつかあります。 まず、ギャラリーの作成に役立つプラグインを選択する必要があります。 次に、ギャラリーを適切に表示するテーマを選択する必要があります。 最後に、画像をアップロードしてギャラリー設定を構成する必要があります。
調査によると、訪問者の 38% は、魅力的でない Web サイトを離れます。 WordPress テーマでは、写真を行と列に並べることができます。 このページは他のブラウザーよりもすっきりしているため、訪問者はこのページを使用するとより良いブラウジング エクスペリエンスを体験できます。 このチュートリアルの目標は、WordPress でギャラリーを作成する方法を紹介することです。 Gutenberg Block Editor を使用して WordPress ギャラリーをブログに追加できます。 この方法には多くの機能が欠けているという事実にもかかわらず、必要に応じて、よりプロフェッショナルな外観を実現するために使用できます。 Envira Gallery や Modula などのWordPress ギャラリー プラグインが最も人気があります。
方法をよく理解すれば、WordPress ギャラリーを作成するのは難しくありません。 このガイドの手順に従うのは誰にとっても簡単です。 サイトを次のレベルに引き上げたい場合は、プラグインとウィジェットが不可欠です。 どの方法があなたに合っていますか？ 以下のコメント セクションで、ご意見をお聞かせください。
WordPress で動的画像ギャラリーを作成する方法
データソースを設定したら、FooGallery PRO (エキスパートまたはコマース) を使用して新しい動的ギャラリーを作成できます。 これを行うには、[ギャラリーを追加] メニューに移動します。 [メディアの追加] リンクをクリックすると、別のソースからメディアを追加できます。 ギャラリーの作成に使用するデータ ソースが決定されます。
Web サイトに動的な要素を配置することは、読者がコンテンツに関与する可能性を高める優れた方法です。 Web サイトには、さまざまな動的要素を組み込むことができます。 この投稿では、ダイナミック ギャラリーとは何か、またその意味について説明します。 また、ディスカッションで独自の動的ギャラリーを設定する方法を学ぶこともできます。 ダイナミック ギャラリーは、サイトに簡単に追加して目立たせる方法です。 WordPress サイトにダイナミック ギャラリーを組み込むには、必要なツールが必要です。 FooGallery PRO Commerce を使用すると、WooCommerce 製品から製品ギャラリーを作成できます。
FooGallery PRO (エキスパートまたはコマース) を使用すると、マウスを数回クリックするだけで動的ギャラリーを簡単に作成できます。 ギャラリーで画像を抽出するソースによって決まります。 たとえば、動的な WooCommerce ギャラリーには、並べ替え順序や価格などの説明など、さまざまなオプションを含めることができます。 フォト ギャラリーを使用していて動的な要素を含めたい場合、これは優れたオプションです。 WooCommerce 製品で動的な製品ギャラリーを作成する場合は、WooCommerce 製品を更新して変更を反映させるだけです。 複数のデータ ソースのいずれかを使用してメディアを簡単に並べ替えおよび分類し、メディア ピッカーを使用して表示することができます。
WordPressでスクロールギャラリーを作成する方法
WordPress でスクロール ギャラリーを作成するには、いくつかの方法があります。 1 つの方法は、Jetpack や NextGEN Gallery などのプラグインを使用することです。 これらのプラグインを使用すると、スクロールできる画像のギャラリーを作成できます。
スクロール ギャラリーを作成するもう 1 つの方法は、この機能が組み込まれている WordPress テーマを使用することです。一部のテーマでは、画像のギャラリーを作成し、Web サイトのスクロール可能な領域に表示できます。
プラグインやテーマを使用せずにスクロール ギャラリーを作成する場合は、いくつかのコードを使用して作成できます。 これを行うにはいくつかの方法がありますが、1 つの方法は jQuery Cycle プラグインを使用することです。 このプラグインを使用すると、スクロールできる画像のギャラリーを作成できます。
プラグインをインストールしたら、ショートコード [サイクル] を使用してギャラリーを WordPress の投稿またはページに挿入できます。
次のステップでは、WordPress Gutenberg Hub のスクロール可能な画像ギャラリー ブロックを作成します。 このチュートリアルの目的は、Gutenberg のスクロール可能なギャラリー ブロックを作成するプロセス全体を順を追って説明することです。 この初心者向けガイドを使用して、WordPress 用のカスタム Gutenberg ブロックを作成する方法を学びましょう。 プロップを使用して、メディア プレースホルダーをより柔軟にすることができます。 ユーザーはメディア ギャラリーから画像を入力するため、現時点ではブロックは意図したとおりに機能しません。 メディア プレースホルダーには、画像の選択に使用できる onSelect プロップが含まれています。 ユーザーがギャラリーを変更できるようにするツールバー コントロール ユーザーがブロック内の画像の選択を終了するとすぐに、ブロックを使用してそれらをレンダリングできます。
つまり、フロントエンド ビューでブロックの静的マークアップを生成しています。 また、メイン フィギュア タグに data-direction="right" 属性を追加しました。これは、基本的に現在のアニメーションの方向を保持します (現時点では方向を修正することはできません)。 このように、各構成オプションを 3 つのセクションに分けます。 この構成オプションには、WordPress で構築された ToggleControl コンポーネントを使用します。 新しいパネルに加えて、一般的なコントロールを収容する新しいパネルも作成します。 フロントエンドでこの特定の属性を使用して動的クラスを作成しましょう。
スライドショーのヒント
[プレビュー] をクリックすると、スライドショーの動作を確認できます。 右下隅のアイコンをクリックすると、速度、音量などを変更できます。 スライドショーをフルスクリーン ビデオに変換する場合は、左下隅にある [フル スクリーン] ボタンをクリックします。
WordPress Create Gallery プラグイン
WordPress のギャラリー プラグインを作成するには、さまざまな方法があります。 一般的な方法の 1 つは、NextGEN Gallery プラグインを使用することです。 このプラグインを使用すると、WordPress サイト内に画像のギャラリーを作成できます。 もう 1 つの人気のあるプラグインは、WP-SimpleViewer プラグインです。 このプラグインを使用すると、WordPress サイト内に画像のシンプルなギャラリーを作成できます。
このチュートリアルでは、WordPress 用の画像ギャラリー プラグインを作成する方法について説明します。 画像を投稿またはページにアップロードするたびに自動的に生成されるサムネイル ナビゲーションを備えた、シンプルで魅力的なギャラリーです。 特別な設定、構成オプション、またはジャンプするためのフープがなくても、問題なく動作します。 Instant Galleryの主な目標は、画像ギャラリーを作成するために、WordPress の投稿またはページへの画像のアップロードをできるだけ簡単にすることです。 HTML、CSS、PHP、および JavaScript を少し使用して、目標を達成します。 次のセクションでは、できるだけ多くのサムネイルを生成するために PHP を使用します。 上記のコード スニペットで Get_posts を使用して、$args に基づいて基準を満たす画像を取得します。
結果は、$attachments という名前の変数に格納できます。 このコードは、ギャラリーの主要な構造要素を表す、ギャラリーのメイン画像セクションに最初の大きな画像を表示します。 次の手順では、関数 WP_get_attachment_image のパラメーターの配列を定義するプロセスについて説明します。 現在の添付ファイル (現在の画像) を取得して、画像全体のサイズを返します。 さらに、$default_attr 配列で指定された引数に対応する属性が適用されます。 ステップ 2 では、ナビゲーション メニューが表示されます。 このブロックの上部に含まれている #ig-thumbs リストには、コードをナビゲートする方法を理解するのに役立つ多くのポインターが含まれています。
ステップ 2.4 パッケージの一部として上記のコードを作成しました。このコードは、以前の WordPress 投稿またはページから画像添付ファイルのリストを取得し、使用したマークアップに基づいてギャラリーを生成します。 次のステップは、WordPress の投稿またはページにショートコードを追加することです。 ここ Wptuts には、優れたものを含む、ショートコードに関する優れた詳細な記事が多数あります。 Instagram のインスタント ギャラリーは、魔法の基盤の上に構築されています。 jQuery が必要とする基本レベルの対話性を実現するには、関数を jQuery ベースにする必要があります。 その結果、WordPress の WordPress WP_enqueue_script 関数を使用してスクリプトを WordPress に挿入します。 スクリプトが適切な場所に適切なタイミングで存在することで、WordPress で競合が発生しないことが保証されます。
サムネイルをクリックすると、いくつかのことが起こります。 jQuery 関数では、サムネイルを、クリックされたサムネイルに対応する大きな画像に置き換えます。 WordPress のファイル命名スキームにより、画像の入れ替えを実行できます。 WordPress は、アップロード時に my-image.jpg という名前の画像に対してさまざまなサイズの画像を生成します。 サムネイルのサイズを変更する前に、画像の他のサイズのサイズを知っておく必要があります。 例として、my-image-150×150.jpg を 600×300 の中サイズの画像に交換したい場合は、.jQuery 関数を使用します。 次の行は $('#ig-thumbs li img') で、最初から始まります。
すべてのサムネイル画像は、選択された CSS クラスから単純に削除されます。 その結果、クリックされた画像のクラスがこれに追加されます。 インスタント ギャラリーの CSS はステップ 4 にあります。 CSS を習得するのにそれほど時間はかかりません。 ギャラリーには、基本的なセレクターとスタイルのみを含める必要があります。 次の手順では、WordPress でエンキュー スタイルを使用して CSS を読み込む方法について説明します。
最後に、私たちの画像ギャラリーは最高です。 Instant Gallery のコードは、ここにすべて表示するには十分な長さです。 ソースファイルをダウンロードして、自分で試してみることができます。 このギャラリーの目的は、WordPress 投稿にアップロードされた画像から画像ギャラリーを自動的に生成する最も簡単で迅速な方法であることです。