クイックヒント: カラーボックスをネイティブのショートコードに統合する

ネイティブ [ギャラリー] ショートコードは優れていますが、優れているわけではありません。この簡単なヒントでは、jQuery を使用してそれを美しくします。

[ギャラリー] ショートコードはあまり良くありません。デフォルトの CSS を無効にすることはできません、CSS クラスを追加または編集することはできません、デフォルトのプロパティを編集することはできません (これは実際には一般的なショートコードの問題です)...これらのことは、WordPress を開発しているほとんどの人にとっては気にならないことですが、 、私のような変人は文句を言うかもしれません！ :)

この簡単なヒントでは、画像添付ページを削除し、サイトの訪問者が jQuery モーダル ボックスで画像を表示できるようにします。

---

最高の jQuery ライトボックス プラグインの 1 つ: ColorBox

Colorbox は 5 KB (zip 形式) 未満で、幅広いブラウザー (IE6 も含む) をサポートしているので、私のお気に入りの jQuery ライトボックス プラグインです。

プラグイン ページからわかるように、プラグインには大量の設定、メソッド、フックがあり、必要に応じてカスタマイズできます。また、5 つのクリーンな CSS ベースのテーマも備えています。

パッケージをダウンロードし、colorbox.min.js と 5 つのテーマの 1 つ (colorbox.css ファイルと「images」フォルダー)を「colorbox」フォルダーという名前のファイルに抽出します。次に、そのフォルダーを WordPress テーマにアップロードします。アップロードする前に、colorbox.min.js ファイルの最後に次のコードを追加します。 リーリー

---

Shortcode-Ception: 別のショートコードを使用するショートコードを構築する

これが少し奇妙であることは承知していますが、これが最もクリーンな方法のように思えます。

[jgallery] ショートコードを作成します。

クイック ヒントからのヒント:

[jgallery] ショートコードを作成した後に投稿内のすべてのギャラリー ショートコードを変更する予定がある場合は、検索正規表現プラグインを使用して [gallery] を検索/置換することをお勧めします。 ] [jギャラリー].

いつものように、基本的なショートコード関数を作成することから始めます:

リーリー

次に、

CSS ファイルと JS ファイルをキューに入れます。 Colorbox スクリプト dependency を指定すると、まだエンキューされていない場合、jQuery が自動的にエンキューすることを忘れないでください。 リーリー

この関数で

[gallery] ショートコードを使用する必要があることを除いて、すべての準備が整いました。 do_shortcode() 関数を使用して、[gallery link="file"] ショートコードを返します: リーリー

完成しました！この関数をテーマの

functions.php ファイルに追加すると、すぐに [jgallery] ショートコードの使用を開始できます。以下のコメント欄でご意見をお聞かせください。楽しむ！ :)

以上がクイックヒント: カラーボックスをネイティブのショートコードに統合するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。