WP PLUGIN CSS修正＋更新時の表示タブ修正

・カテゴリー表示等のCSSについてflexを適用
・データ更新時に表示するタブが、POST前に開いていたタブになるようPHPとjQyeryを修正

css/apop-style.css

@@ -21,7 +21,7 @@ h3 {
     padding: .5em;
     text-align: center;
     background: #ababab;
-    border: 1px solid #999;
+    border: 1px solid #ccc;
     cursor: pointer;
 }
 
@@ -42,7 +42,7 @@ h3 {
 .post-order-box-outer {
     width: 100%;
     margin: -1px 0 2em;
-    border: 1px solid #999;
+    border: 1px solid #ccc;
     background: #fff;
 }
 
@@ -52,11 +52,14 @@ h3 {
 
 .list-orders-outer {
     width: 100%;
+    display: flex;
     margin-bottom: 1em;
+    flex-wrap: wrap;
+    justify-content: space-between;
 }
 
 .list-orders-inner {
-    width: 50%;
+    width: calc((100% / 2) - 20px);
     padding: .5em;
     position: relative;
 }
@@ -128,7 +131,7 @@ dl.apop_setting_list_dd dd input {
     background: #fff;
     cursor: move;
     color: #4b4b4b;
-    border: 1px solid #ababab;
+    border: 1px solid #ccc;
 }
 
 .search_normal_sort .product-list {
@@ -220,15 +223,16 @@ dl.apop_setting_list_dd dd input {
     cursor: default;
 }
 
-.apop-submit{
+.apop-submit {
-    margin:1em .5em;
+    margin: 1em .5em;
 }
 
-.apop-form_table{
+.apop-form_table {
     background: #fff;
 }
-.apop-form_table th{
+
-    padding-left:.5em;
+.apop-form_table th {
+    padding-left: .5em;
 }
 
 @media only screen and (max-width: 1264px) {

js/apop-style.js

@@ -19,24 +19,33 @@ jQuery(function ($) {
     change_normal_field_sort();
 
     function change_tab_menu() {
-        let submit_type = $('.post-order-box-outer').data('submit_type');
+        let apop_submit_type = $('#apop_submit_type');
         let order_nav_list = $('.post-order-nav li');
         let order_box = $('.post-order-box');
 
-        order_nav_list.removeClass('en');
+        init();
-        order_box.hide();
+        click_menu();
-        $('.post-order-nav li:eq(' + submit_type + ')').addClass('en');
-        $('.post-order-box:eq(' + submit_type + ')').show()
 
-        order_nav_list.on('click', function () {
+        function init() {
-            if (!$(this).hasClass('en')) {
+            let submit_type = apop_submit_type.val();
-                let target_index = $(this).index();
+            order_nav_list.removeClass('en');
-                order_nav_list.removeClass('en');
+            order_box.hide();
-                $(this).addClass('en');
+            $('.post-order-nav li:eq(' + submit_type + ')').addClass('en');
-                order_box.hide();
+            $('.post-order-box:eq(' + submit_type + ')').show()
-                $('.post-order-box:eq(' + target_index + ')').show();
+        }
-            }
+
-        });
+        function click_menu() {
+            order_nav_list.on('click', function () {
+                if (!$(this).hasClass('en')) {
+                    let target_index = $(this).index();
+                    order_nav_list.removeClass('en');
+                    $(this).addClass('en');
+                    order_box.hide();
+                    $('.post-order-box:eq(' + target_index + ')').show();
+                    apop_submit_type.val(target_index);
+                }
+            });
+        }
     }
 
     function order_list() {

template/order.php

@@ -1,5 +1,5 @@
 <?php
-$submit_type = APOP_UI::input_post_filter( 'submit_type', 'str' );
+$submit_type = APOP_UI::input_post_filter( 'apop_submit_type', 'str' );
 ?>
 <div class="post-setting-box">
     <h2>並べ替え</h2>
@@ -12,9 +12,10 @@ $submit_type = APOP_UI::input_post_filter( 'submit_type', 'str' );
             <li>カスタム分類</li>
         </ul>
     </nav>
-    <div class="post-order-box-outer" data-submit_type="<?php echo $submit_type; ?>">
+    <div class="post-order-box-outer">
         <form action="" method="post">
 			<?php wp_nonce_field( 'sh_options' ); ?>
+            <input id="apop_submit_type" type="hidden" name="apop_submit_type" value="<?php echo $submit_type; ?>">
             <div class="post-order-box">
                 <div class="list-orders-outer">
                     <div class="list-orders-inner">
@@ -80,9 +81,8 @@ $submit_type = APOP_UI::input_post_filter( 'submit_type', 'str' );
             <div class="post-order-box">
                 <div class="tax_sort_box">
 					<?php
-					$tax_lists          = array( 'category' => APOP_UI::get_cat_tag_list( 'cat', 'category' ) );
+					$tax_lists      = array( 'category' => APOP_UI::get_cat_tag_list( 'cat', 'category' ) );
-					$tax_title_text     = 'カテゴリー';
+					$tax_title_text = 'カテゴリー';
-					$submit_type_number = 2;
 					?>
 					<?php include APOP_PLUGIN_PATH . 'template/order_parts_taxonomy.php'; ?>
                 </div>
@@ -90,9 +90,8 @@ $submit_type = APOP_UI::input_post_filter( 'submit_type', 'str' );
             <div class="post-order-box">
                 <div class="tax_sort_box">
 					<?php
-					$tax_lists          = array( 'tag_id' => APOP_UI::get_cat_tag_list( 'tag', 'post_tag' ) );
+					$tax_lists      = array( 'tag_id' => APOP_UI::get_cat_tag_list( 'tag', 'post_tag' ) );
-					$tax_title_text     = 'タグ';
+					$tax_title_text = 'タグ';
-					$submit_type_number = 3;
 					?>
 					<?php include APOP_PLUGIN_PATH . 'template/order_parts_taxonomy.php'; ?>
                 </div>
@@ -100,9 +99,8 @@ $submit_type = APOP_UI::input_post_filter( 'submit_type', 'str' );
             <div class="post-order-box">
                 <div class="tax_sort_box">
 					<?php
-					$tax_lists          = array( 'taxonomy' => APOP_UI::get_cat_tag_list( 'tax', 'taxonomy' ) );
+					$tax_lists      = array( 'taxonomy' => APOP_UI::get_cat_tag_list( 'tax', 'taxonomy' ) );
-					$tax_title_text     = 'カスタム分類';
+					$tax_title_text = 'カスタム分類';
-					$submit_type_number = 4;
 					?>
 					<?php include APOP_PLUGIN_PATH . 'template/order_parts_taxonomy.php'; ?>
                 </div>

template/order_parts_taxonomy.php

@@ -1,4 +1,4 @@
-<?php if ( isset( $tax_lists, $tax_title_text, $submit_type_number ) ): ?>
+<?php if ( isset( $tax_lists, $tax_title_text ) ): ?>
 	<?php foreach ( $tax_lists as $tax_key => $tax_list ) : ?>
         <div class="list-orders-outer">
 			<?php if ( count( $tax_list ) > 0 ): ?>