使用 CSS 樣式碼，改變新舊留言的排列順序 #comment-text{ display:flex; flex-direction: column-reverse;}
任意翻轉留言排列順序的小工具，共有製作3種款式
甲意那一款，自己夾回去 .. 本工具需要使用到，JavaScript 程式語言，所以、請先到帳號中心，查看你的帳號，手機是否已有驗證，(有驗證過的帳號，才有執行程式的能力 )
然後 ~
進入 >> 後台管理 >> 側欄管理 >> 新增一個「版位」
點按以下的程式碼 ~ 複製
<script language="JavaScript">
if(document.getElementById('article-main')){
jQuery(function() { var cx=0;
jQuery('.post-comment').append(jQuery('#comm_order'));
jQuery('#comm_order').css('display','inline-block');
jQuery("#comment-title").click(function(){
if(jQuery('#comment-text').css('display')=="block"){jQuery('#comment-text').css('display','flex')}
});
jQuery("#comm_point").click(function(){
if(cx==0){ cx=1;
jQuery('#comm_order img').css('transform' , 'rotateX(180deg)');
jQuery('#comment-text').css('flex-direction','column');
}
else{cx=0;
jQuery('#comm_order img').css('transform' , 'rotateX(0deg)');
jQuery('#comment-text').css('flex-direction','column-reverse');
}
}); }); }
</script>
<style type="text/css"><!--
#comment-text {
display: flex;
flex-direction: column-reverse;
}
#comm_order {width: 90%; display:none;}
#comm_order img { position: absolute; top: 0; left: 0; transition: 1.2s;}
#comm_order img:first-child { z-index: 2; backface-visibility: hidden; }
#comm_point{position: relative;width:100px;height:43px;display: inline-block; MARGIN-BOTTOM: -12PX;}
--></style>
<div id="comm_order"><span style="color: red; font-size: large; margin-left: calc(100% - 200px);
"><b>留言排序 :</b>
<div id="comm_point">
<img src="https://pic.pimg.tw/e717/1610886907-438630138-g.jpg" /> <img src="https://pic.pimg.tw/e717/1610886913-274274742-g.jpg" /></div></span> </div>
樣式 2 的程式碼
<script language="JavaScript">
if(document.getElementById('article-main')){
jQuery(function() {
jQuery('.post-comment').append(jQuery('#comm_sort'));
jQuery('#comm_sort').css('display','inline-block');
jQuery('#comment-text').css({'display':'flex','flex-direction':'column'});
jQuery("#comment-title").click(function(){
if(jQuery('#comment-text').css('display')=="block"){jQuery('#comment-text').css('display','flex')}
});
}); }
</script>
<div id="comm_sort" style="text-align: right; width: 80%; display: none;">
<span style="color: red; font-size: large;"><b>留言排序 :</b></span> <span style="border: 1px solid rgb(102, 102, 102); padding: 5px 20px;"><input name="male" onchange="jQuery('#comment-text').css('flex-direction','column-reverse')" type="radio" value="reverse" /> <label>新 > 舊</label></span><span style="border: 1px solid rgb(102, 102, 102); padding: 5px 20px;"><input name="male" checked="TRUE" onchange="jQuery('#comment-text').css('flex-direction','column')" type="radio" value="column" /> <label>新 < 舊</label></span></div>
樣式 3 的程式碼 舊 
新
<script language="JavaScript">
if(document.getElementById('article-main')){
jQuery(function() { var cx=0;
jQuery('.post-comment').append(jQuery('#comm_sort'));
jQuery('#comm_sort').css('display','inline-block');
jQuery('#comment-text').css({'display':'flex','flex-direction':'column'});
jQuery("#comment-title").click(function(){
if(jQuery('#comment-text').css('display')=="block"){jQuery('#comment-text').css('display','flex')}
});
jQuery("#point_img").mouseover(function(){
if(cx==0){ cx=1;
jQuery(this).css('transform' , 'rotate(180deg)');
jQuery('#comment-text').css('flex-direction','column-reverse');
}
else{cx=0;
jQuery(this).css('transform' , 'rotate(0deg)');
jQuery('#comment-text').css('flex-direction','column');
}
}); }); }
</script>
<div id="comm_sort" style="text-align: right; width: 80%; display: none;">
<span style="color: red; font-size: large;"><b>留言排序 :</b></span>
<span style="border: 1px solid rgb(250, 120, 120); padding: 15px;"> 新 <img align="ABSMIDDLE" id="point_img" style=" transition: .6s;" src="https://pic.pimg.tw/e717/1565348033-1504366907.png" /> 舊 </span>
</div>
填入程式碼：按送出，醬就 OK 了!!
每個人的版型不一樣，若位子有走鐘，自己調整一下~
留言列表