WordPress にて jQueryUI テーマを動的選択してデザインを反映

萩原賢二のコーディングストック > プログラミング > WordPress にて jQueryUI テーマを動的選択してデザインを反映

2019.08.24

WordPress にて jQueryUI テーマを動的選択してデザインを反映

「WordPress」にて「jQueryUI」のテーマを動的選択してデザインを反映さてみました。
jQueryはWordPressに元々付属のものを使っていますが、「jQueryUI」は現時点での最新版をCDNで利用しています。
動的に「jQueryUI」のテーマを読み込んだ後に確認用の「Widgets」を使用してみました。
「Datepicker」カレンダー表示
「Dialog」ダイアログボックス
「SelectMenu」　テーマを選択すると動的に Widgetsのテーマに適用されます。
「button」　ダイアログを表示します。
「accordion」アコーディオンを表示します。

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

ダイアログで情報を表示する際に便利です。ダイアログウインドウは移動とリサイズが可能で、また’x’アイコンで閉じることも出来ます。

function.phpにjqueryUIを登録 (add_acction)

//function.phpにjqueryUIを登録 (add_acction)
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', 'https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/base/jquery-ui.css' );
    wp_enqueue_script('jqueryUI','https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js');
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

// 画像配置 ショートコード	
function getimage2($atts) {
	$folder= $atts["folder"] ? $atts["folder"] : "/img/flexbox";
	$width = $atts["width"] ? $atts["width"] : "150";
	$class = $atts["class"] ? $atts["class"] : "item";
	
	$imgdata = get_template_directory_uri() . "/$folder/" . $atts["img"];
	return	"<img src=\"$imgdata\" alt=\"\" class=\"$class\" width=\"$width\" />\n";

}
add_shortcode('lbimg2', 'getimage2');

//function.phpにjqueryUIを登録 (add_acction)

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', 'https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/base/jquery-ui.css' );

wp_enqueue_script('jqueryUI','https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js');

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

// 画像配置ショートコード

function getimage2($atts) {

$folder= $atts["folder"] ? $atts["folder"] : "/img/flexbox";

$width = $atts["width"] ? $atts["width"] : "150";

$class = $atts["class"] ? $atts["class"] : "item";

$imgdata = get_template_directory_uri() . "/$folder/" . $atts["img"];

return "<img src=\"$imgdata\" alt=\"\" class=\"$class\" width=\"$width\" />\n";

}

add_shortcode('lbimg2', 'getimage2');

確認用 Widgets のHTMLソース

// 確認用 Widgets のHTMLソース
// 今回の確認用サンプルでアコーディオンのが像はショートコードで取得しています。
// Usage: [libimg2 {オプション}] 上記のfanction.phpの記述参照
<div>
   <div id="datepicker"></div>      // DatePicker 
   <div id="accordion">             // アコーディオン
     <h3>Section 1</h3>             // Select メニュー Themes を選択する
     <div>[lbimg2 folder=/img/jqueryUI img=face01.jpg]</div>
     <h3>Section 2</h3>
     <div>[lbimg2 folder=/img/jqueryUI img=face02.jpg]</div>
     <h3>Section 3</h3>
     <div>[lbimg2 folder=/img/jqueryUI img=face03.jpg]</div>
     <h3>Section 4</h3>
     <div>[lbimg2 folder=/img/jqueryUI img=face04.jpg]</div>
     <h3>Section 5</h3>
     <div>[lbimg2 folder=/img/jqueryUI img=face05.jpg]</div>
     <h3>Section 6</h3>
     <div>[lbimg2 folder=/img/jqueryUI img=face06.jpg]</div>
   </div>
 </div>

// ダイアログボックスの表示
<div id="dialog" title="基本的なダイアログ">
<p>
ダイアログで情報を表示する際に便利です。
ダイアログウインドウは移動とリサイズが可能で、また'x'アイコンで閉じることも出来ます。
</p>
</div>

// 確認用 Widgets のHTMLソース

// 今回の確認用サンプルでアコーディオンのが像はショートコードで取得しています。

// Usage: [libimg2 {オプション}] 上記のfanction.phpの記述参照

<div>

<div id="datepicker"></div> // DatePicker

<div id="accordion"> // アコーディオン

<h3>Section 1</h3> // Select メニュー Themes を選択する

<div>[lbimg2 folder=/img/jqueryUI img=face01.jpg]</div>

<h3>Section 2</h3>

<div>[lbimg2 folder=/img/jqueryUI img=face02.jpg]</div>

<h3>Section 3</h3>

<div>[lbimg2 folder=/img/jqueryUI img=face03.jpg]</div>

<h3>Section 4</h3>

<div>[lbimg2 folder=/img/jqueryUI img=face04.jpg]</div>

<h3>Section 5</h3>

<div>[lbimg2 folder=/img/jqueryUI img=face05.jpg]</div>

<h3>Section 6</h3>

<div>[lbimg2 folder=/img/jqueryUI img=face06.jpg]</div>

</div>

// ダイアログボックスの表示

<p>

ダイアログで情報を表示する際に便利です。

ダイアログウインドウは移動とリサイズが可能で、また'x'アイコンで閉じることも出来ます。

</p>

</div>

jQueryソースコード

//jQueryソースコード
jQuery(function($) {
// ダイアログを開くボタンをクリック処理     
    $( "#dopen").on('click',function(){
        $( "#dialog" ).dialog( "open" );
    });
// ダイアログ本体の設定
    $( "#dialog" ).dialog(
    {	autoOpen:false,
        position: {
            my: "center",　　// ダイアログの位置
            at: "center",   // ダイアログを表示する位置(of:で指定)
            of: "#jqueryUIwrapper"
            // Widgets の表示してある「divタグ」の中央に配置
            // dialog( "open" )で表示した時は前回の移動した位置を記憶している。
            // ページをリロードすると上記の設定が有効となる。
        },
        closeOnEscape:false,
        close: function( event, ui ) {
            alert("ダイアログは閉じられます。");		
        }	
    });
// アコーディオン　jQueryUI　のWidgetsを利用
// テーマを変更するとデザインも変更される。
    $( "#accordion" ).accordion();
// ダイアログを開くボタン自体も　jQueryUI　のWidgetsを利用
// テーマを変更するとデザインも変更される。
    $( "#dopen" ).button();

// Datepicker Widgetsを利用
// テーマを変更するとデザインも変更される。
    $( "#datepicker" ).datepicker();

// selectmenu　jQueryUI　のWidgetsを利用
// 動的にテーマのCSSを適用させる
// テーマを変更するとデザインも変更される。
　　$('.flmenu').selectmenu(
　　{
　　　　change: function( event, ui ){
　　　　　　var r = $('option:selected').val();
　　　　　　var link_style = $('<link>').attr({
　　　　　　　　'rel': 'stylesheet',
　　　　　　　　'href': 'https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/' + r + '/jquery-ui.css'
　　　　　　});
　　　　　　$('body').append(link_style);  // CDNを　bodyタグの最後に追加する。
　　　　},
　　　　width: 400
　　　　}
　　);
});

//jQueryソースコード

jQuery(function($) {

// ダイアログを開くボタンをクリック処理

$( "#dopen").on('click',function(){

$( "#dialog" ).dialog( "open" );

});

// ダイアログ本体の設定

$( "#dialog" ).dialog(

{ autoOpen:false,

position: {

my: "center",　　// ダイアログの位置

at: "center", // ダイアログを表示する位置(of:で指定)

of: "#jqueryUIwrapper"

// Widgets の表示してある「divタグ」の中央に配置

// dialog( "open" )で表示した時は前回の移動した位置を記憶している。

// ページをリロードすると上記の設定が有効となる。

closeOnEscape:false,

close: function( event, ui ) {

alert("ダイアログは閉じられます。");

}

});

// アコーディオン　jQueryUI　のWidgetsを利用

// テーマを変更するとデザインも変更される。

$( "#accordion" ).accordion();

// ダイアログを開くボタン自体も　jQueryUI　のWidgetsを利用

// テーマを変更するとデザインも変更される。

$( "#dopen" ).button();

// Datepicker Widgetsを利用

// テーマを変更するとデザインも変更される。

$( "#datepicker" ).datepicker();

// selectmenu　jQueryUI　のWidgetsを利用

// 動的にテーマのCSSを適用させる

// テーマを変更するとデザインも変更される。

　　$('.flmenu').selectmenu(

　　{

　　　　change: function( event, ui ){

　　　　　　var r = $('option:selected').val();

　　　　　　var link_style = $('<link>').attr({

　　　　　　　　'rel': 'stylesheet',

　　　　　　　　'href': 'https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/' + r + '/jquery-ui.css'

　　　　　　});

　　　　　　$('body').append(link_style); // CDNを　bodyタグの最後に追加する。

　　　　width: 400

　　　　}

　　);

});

jQueryUIのテーマ選択用の Select widjets

//jQueryUIのテーマ選択用の Select widjets
<div id="datepicker"></div>  
<div id="dialog" title="基本的なダイアログ">
<p>
ダイアログで情報を表示する際に便利です。
ダイアログウインドウは移動とリサイズが可能で、また'x'アイコンで閉じることも出来ます。</p>
</div  style="display:flex; justify-content:space-between">
// flexboxを使って 横一列にセレクト、ボタンを表示する。
// justify-content:space-between でDIV内の両サイドに分散させる。
<select class="flmenu">
	<option value="base">Base</option>			
	<option value="black-tie">Black Tie</option>			
	<option value="blitzer">Blitzer</option>
	<option value="cupertino">Cupertino</option>
	<option value="dark-hive">Dark Hive</option>
	<option value="dot-luv">Dot Luv</option>
	<option value="eggplant">Eggplant</option>
	<option value="excite-bike">Excite Bike</option>
	<option value="flick">Flick</option>
	<option value="hot-sneaks">Hot Sneaks</option>
	<option value="humanity">Humanity</option>
	<option value="le-frog">Le Frog</option>
	<option value="mint-choc">Mint Choc</option>
	<option value="overcast">Overcast</option>
	<option value="pepper-grinder">epper Grinder</option>
	<option value="redmond">Redmond</option>
	<option value="smoothness">Smoothness</option>
	<option value="south-street">Street South</option>
	<option value="start">Start</option>
	<option value="sunny">Sunny</option>
	<option value="swanky-purse">Swanky Purse</option>
	<option value="trontastic">Trontastic</option>
	<option value="ui-darkness">UI Darkness</option>
	<option value="ui-lightness">UI Lightness</option>
	<option value="vader">Vader</option>
</select>

//jQueryUIのテーマ選択用の Select widjets

<p>

ダイアログで情報を表示する際に便利です。

ダイアログウインドウは移動とリサイズが可能で、また'x'アイコンで閉じることも出来ます。</p>

</div style="display:flex; justify-content:space-between">

// flexboxを使って横一列にセレクト、ボタンを表示する。

// justify-content:space-between でDIV内の両サイドに分散させる。

<option value="black-tie">Black Tie</option>

<option value="blitzer">Blitzer</option>

<option value="cupertino">Cupertino</option>

<option value="eggplant">Eggplant</option>

<option value="excite-bike">Excite Bike</option>

<option value="flick">Flick</option>

<option value="hot-sneaks">Hot Sneaks</option>

<option value="humanity">Humanity</option>

<option value="overcast">Overcast</option>

<option value="pepper-grinder">epper Grinder</option>

<option value="redmond">Redmond</option>

<option value="smoothness">Smoothness</option>

<option value="south-street">Street South</option>

<option value="start">Start</option>

<option value="sunny">Sunny</option>

<option value="swanky-purse">Swanky Purse</option>

<option value="trontastic">Trontastic</option>

<option value="ui-darkness">UI Darkness</option>

<option value="ui-lightness">UI Lightness</option>

<option value="vader">Vader</option>

</select>

参考サイト：
jQuery user interface
jQueryUi Widgets

投稿者: khagiwara
プログラミング

列行を一次元に並べて表示する CSS 「FlexBox」 jQuery + Ajax で挙動を確認する。

ワードプレス上で可変的にグリッドレイアウトを行うjQueryプラグイン「vGrid」

Webサイトデザイン、プログラミング、サーバー構築運用の記録

WordPress にて jQueryUI テーマを動的選択してデザインを反映

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

function.phpにjqueryUIを登録 (add_acction)

確認用 Widgets のHTMLソース

jQueryソースコード

jQueryUIのテーマ選択用の Select widjets

最近の記事