jQuery Mobile にあるいくつかの機能を WordPress プラグインに統合しようとしています。特にモバイル デバイスをターゲットにしているわけではありません。フレームワークのいくつかの機能が気に入っているだけです。私が抱えている問題は、jQuery Mobile CSS がネイティブ WP CSS を引き継いでスタイリングを変更しているように見えることです。また、jQuery Mobile の一部の機能が正しく動作しません。wp_register_style と wp_enqueue_style を使用してスタイルをロードし、 wp_enqueue_script を使用して次のようにスクリプトをロードします。
wp_register_style( 'jquery-mobile-style', 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css');
wp_register_style( 'jquery-mobile-style', 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css');
wp_enqueue_script('jquery');
wp_enqueue_script('jq-script', 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js');
私は特にパネルと協力しています。次のように、パネル コードをページに挿入します。
jQuery(document).ready(function($){
var s = '<div data-role="panel" id="myPanel" data-display="overlay" data-theme="b">';
s += '<div class="panel-content">';
s += '<h3>Default panel options</h3>';
s += '<a href="#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a>';
s += '</div><!-- /content wrapper for padding -->';
s += '</div><!-- /defaultpanel -->';
$(s).appendTo('#page');
次に、パネルを開くためのリンクを追加します。
$('.entry-content').append('<div data-role="content"><a href="#myPanel" data-rel="panel" data-role="button">Share</a></div>');
「オーバーレイ」機能のみが機能します。スタンドアロンの PHP ページで動作させることができるので、WordPress/jQuery Mobile の問題のようです。