WordPressギャラリーにスタイリッシュなライトボックス効果を追加します

jQuery colorboxライトボックスでWordPressギャラリーを強化します

このチュートリアルでは、jQuery ColorboxプラグインをWordPressギャラリーに統合して、洗練されたライトボックス効果を作成し、ギャラリーを離れることなく画像ズームとナビゲーションを可能にします。 このアプローチは、特にこの特定の機能に対して、プラグインを使用することと比較して合理化されたソリューションを提供します。

重要な利点：

WordPressギャラリーのエレガントなライトボックスエクスペリエンス

フォーカス機能にカスタムコードを使用することにより、プラグインの肥大を避けます。
整理されたファイル管理を通じてプロジェクト構造をきれいにします。
• レスポンシブデザイン用のカスタマイズ可能なライトボックス設定。
WordPress関数を介した適切なスクリプトの読み込みと国際化サポート。
• 準備：

jquery colorboxをダウンロードして、スキンを選択します テーマのディレクトリにフォルダーを作成し、必要なファイル（

、

、および選択したスキンの画像フォルダー）を内部に配置します。
2. colorboxWordPress Gallery Creation（RECAP）：jquery.colorbox-min.jscolorbox.css
WordPressは、組み込みのギャラリー機能を提供します。 ギャラリーを作成するには：

「メディアの追加」をクリックします。

画像を選択し、[ギャラリーの作成]をクリックします。

1. 設定（タイトルとALTテキストを含む）を選択し、[新しいギャラリーの作成]をクリックします。
2. ギャラリー設定の「メディアファイル」が「リンク」の下で選択されていることを確認します。
3. 
プラグインを使用してみませんか？
4. 多くのプラグインはライトボックス機能を提供していますが、カスタムコーディングは、WordPressギャラリーのみを強化するなど、特定のタスクのためのより洗練されたソリューションを提供します。多くの場合、プラグインには必要ない追加機能とコードが含まれています。
実装：

javascript（main.js）：

テーマのルートディレクトリに

フォルダーを作成し、

を追加します。 次のコードを使用してください：

1. php（functions.php）：次のコードをテーマのjsファイルに追加します：main.js

<code class="language-javascript">(function($) {
    // Lightbox settings
    var cbSettings = {
        rel: 'cboxElement',
        width: '95%',
        height: 'auto',
        maxWidth: '660',
        maxHeight: 'auto',
        title: function() {
            return $(this).find('img').attr('alt');
        },
        current: themeslug_script_vars.current,
        previous: themeslug_script_vars.previous,
        next: themeslug_script_vars.next,
        close: themeslug_script_vars.close,
        xhrError: themeslug_script_vars.xhrError,
        imgError: themeslug_script_vars.imgError
    };

    // Initialize Colorbox
    $('.gallery a[href$=".jpg"], .gallery a[href$=".jpeg"], .gallery a[href$=".png"], .gallery a[href$=".gif"]').colorbox(cbSettings);

    // Responsive resizing
    $(window).on('resize', function() {
        $.colorbox.resize({
            width: window.innerWidth > parseInt(cbSettings.maxWidth) ? cbSettings.maxWidth : cbSettings.width
        });
    });
})(jQuery);</code>

をテーマのナメクジに置き換えることを忘れないでください。 子のテーマを使用する場合は、
2. の代わりにを使用します。

   テスト：

   新しいギャラリー投稿を作成し、ライトボックス機能を確認します。 colorbox.cssファイルを変更することにより、ライトボックスの外観をさらにカスタマイズできます。

   この詳細なガイドは、WordPressギャラリーに堅牢でカスタマイズ可能なライトボックスソリューションを提供し、機能と効率のバランスを提供します。テーマに変更を加える前に、常にファイルをバックアップすることを忘れないでください。

以上がWordPressギャラリーにスタイリッシュなライトボックス効果を追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。