web-dev-qa-db-ja.com

WordPressテーマにjqueryとthickboxを追加する

開発したテンプレート用のthickboxをWordPressに追加したいと思います。現時点で私はheader.php、footer.php、index.php、そしてfunctions.phpだけを持つきれいなテンプレートを試しています。

<?php wp_head(); ?>をheader.phpに、<?php wp_footer(); ?>をfooter.phpに含めました。

私はこのようにwp_headを含めました：

<?php
wp_enqueue_script('jquery');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
wp_head();
?>

functions.phpのこのコードでギャラリーリンククラスをthickboxに変更しました。

<?php add_filter( 'wp_get_attachment_link', 'sant_prettyadd');

function sant_prettyadd ($content) {
    $content = preg_replace("/<a/","<a class=\"thickbox[slides]\"",$content,1);
    return $content;
}
?>

ギャラリー画像をクリックすると、thickboxで開くはずですが、画像ファイルのみが開きます。

jquerygallerywp-enqueue-scriptlinksthickbox
4
Danny Style

必要な関連スクリプトを呼び出すには、（ - functions.phpファイル内の） wp_enqueue_script 関数を使用する必要があります。それは両方の組み込みライブラリを可能にし、あなたがあなたのテーマに含めているカスタムを追加することを可能にします。

0
Norcross

あなたがする必要があるのはあなたのfunctions.phpの簡単な呼び出しです。

add_action( 'wp_enqueue_scripts', 'add_thickbox' );

それでおしまい。 WordPressはjQueryとthickboxスクリプトをエンキューします。デフォルトでは、リンク画像はまだ太っていません。必要がある：

  1. 手動で/ PHPごとにクラスthickboxをリ​​ンクに追加します。
  2. これらのクラスを自動的に追加するには、2番目のスクリプトを使用してください。

footer.phpのサンプルコード：

<script>
jQuery('a img.size-medium').parent().addClass('thickbox').attr('rel', 'page');
</script>
<?php
wp_footer();

このコードは中サイズの画像の周りのすべてのリンクにクラスthickboxを追加し、これらのリンクをグループ化してnext/prevナビゲーションリンクを有効にします。

これで、翻訳されたナビゲーションリンクを含む基本的なthickboxが手に入りました。

enter image description here

これはコアによって管理されているスクリプトなので、キーボードの使い勝手の良い{not}です：矢印キーは何もしません。もっと便利な解決策が必要な場合 - プラグインを取ります。

もう1つの注意：Thickboxは遅かれ早かれコアから削除されるかもしれません。 チケット10955 を参照してください。

8
fuxia