透過CSS Flex的Order來更改元素順序

如何在WordPress內透過CSS Flex的Order方式來更改元素的順序?

此篇是寫給具有一定WordPress能力或 基礎網頁設計 經驗者。
順序更改有很多種方式,以 WordPress 來說,最好的方式當然是直接利用 WordPress的Hook 來做順序更改,避免直接更改核心檔案。
但如果不知道如何更改Hook又希望能快速解決,可以考慮”硬改”的方式。
我們可以透過jQuery的prependTo或appendTo來將你要的元素直接硬插到你要的HTML元素裡面。
但jQuery除了載入速度的問題以外,碰到跑 php迴圈 的時候,可能會出現一些不可預期的問題,因此最簡單的方式就是運用CSS的Flex來解決這件事!

解決方式

以下將以展躍的Demo網站裡面的最新消息做範例,我們需要將日期拉到標題上面。

css flex order new 1

首先,將你需要改變的元素,在他的最外層加入一個Class Name,避免影響到其他相同的元素。

css flex order new 2

再來,先打開F12檢查元素,看清楚你需要更動的內容以及你剛剛命名的Class Name在哪邊。

css flex order new 3

接著發現,class name為 “uael-post__content-wrap” 的這個元素是你要更動的元素的上一層,所以我們需要先讓它變成Flex Box。
加入 display: flex; 及 flex-direction: column; 使它變成 flex 元素,記得它的前面要加入你剛剛命名的 class name 以確保它不會影響其他元素。

css flex order new 4

接著你就可以開始調整你需要的順序,以下是此次範例調整的順序。
順帶一提,你可以安裝客製化CSS的欄位或是使用 Elementor 本身的CSS編輯將你的Style語法貼到裡面,又或者可以像我們此次範例的方式,將語法置入在functions.php內。

css flex order 5

紫色框代表:我需要將此功能插入在HTML的body裡面。
綠色框代表:這次功能的名稱(自訂)。
紅色框代表:你的CSS語法(記得要用<style>包住哦!)。
藍色框代表:
因為functions.php是撰寫php的,你的功能也是用php寫的,因此你要先將前面的php做個”結束”,所以寫 “?>”,而寫完你的HTML與CSS樣式以後,在加入 “<?php” 延續後面的php程式。
也就是說 ?> “這裡面才是你要加入的HTML語法” <?php。

最後只要更新就大功告成囉!

相關文章