Elementor nav menu dropdown align center

Elementor menu widget 下拉選單,預設靠左對齊,我找不到選項去調整子選單的對齊方式,想說用 CSS 下 text-align:center 就好,結果不是,Elementor子選單內的 a 標籤是用 flex 去對齊的,所以要用 flex 的方式去對齊

flex 內容置中

在這邊會透過下列 CSS 達成水平置中

如果要靠左,可以換成下列 CSS

Step 1

下方 CSS 貼到主題的 style.css 文件,或貼到 menu widget 進階選項的自訂樣式欄位中,我自己是習慣寫在 style.css 以免時間一久自己寫在哪都找不到,造成維護不易

Step 2

記得要到 menu wi[……]

Read more

Elementor form 停用 Ajax ,Js 自訂發送動作

Elementor 的 form widget 實在好用,透過所見及所得的方式就可以拉出精美表單,雖然Elementor 已經很貼心地整合很多表單發送後的動作,但還是有些情況並不一定適用,比如說在官網的表單其實是要發送至另一個系統,這些預設程序就無法處理,雖然 Elementor 有提供 API 可以去擴充這些程序,但這些處理程序是表單透過 Ajax 方式發送至後端處理,這種情況,除非目標的系統也開出對應的API端口,就可以順利銜接,但有些時候目標系統並不是我們能控制的,僅能透過傳統的 Http post 方式傳遞表單資料到目標系統,但 Elementor 目前沒有開啟或關閉 Ajax 的選項[……]

Read more

Elementor Widget Posts Pagination Link causing “too many redirect” Error

問題描述

目前使用 Elementor Pro 3.1.0

WordPress 使用 Elementor 編輯器編輯頁面,於頁面中插入「文章」這個小工具並開啟頁碼選項,小工具產生的頁碼連結,於預覽時連結正常,但於發布的網頁,點擊會造成瀏覽器 ERR_TOO_MANY_REDIRECTS 錯誤,以致不能造訪第二頁之後的頁面

新增 Elementor Posts Widget

開啟頁碼選項

在 Elementor 預覽的模式中是正常的,在分類的模板中也是正常可運行的,而在頁面中產生分類列表分頁連結就有這問題,我不確定是不是Bug,Posts Widget 所產生的網址結構如下:此連結會造成瀏覽器拋出 ERR[……]

Read more

WordPress customize site title in theme

大部分看到都是用 wp_title 這個 filter 去改,但對於我 wp_title 不起作用,我找到資料提到自 Wordpress v4.4.0 起,標題的生成方式已更改。這也許是我用 wp_title 仍無法修改的主因

最簡單的用法

以下範例是最簡單的做法,將下列代碼置主題根目錄下的 functions.php

加入一些判斷

更多判斷

雖然 wp_title 對我不起作用,但官網文件仍然有價值,可以參考其判斷方式,這邊做了一點點的修改,一樣可以套用 wp_title 的處理方法
https://developer.wordpress.org/reference/functions/wp_title[……]

Read more

WordPress theme not showing site title in head

如果您開發的主題,沒有出現標題,需要檢查一下當前主題是否包含:

如果主題中找不到,請在主題根目錄加入它,必須要在 after_setup_theme 這個 Hook 中,實際範例如下

https://wordpress.stackexchange.com/a/296877/116304

https://developer.wordpress.org/reference/functions/wp_title/

[……]

Read more

elementor action after form submit . webhook example

雖然 elementor 有很豐富的表單發送後的處理動作,針對特別情況,例如我們希望把表單資料轉存至自家的 CRM 保存,但你家的 CRM 又有奇怪的規格,又或者需要驗證token,這時就要自訂義表單發送後的處理動作了,以下官方文件中自訂義表單發送後的動作

範例:

post json format

官方文檔:
https://developers.elementor.com/forms-api/#Form_New_Record_Action

[……]

Read more

WordPress blank theme and starter theme for Developers

對於開發人員,開始一個WordPress專案,依屬性的不同,開發方式會區分為「全客製」或「半客製」開發,各有優缺點,而依據開發方式的不同,開發人員必須選擇適當主題最為基礎來開始製作專案,而哪種主題適合呢?

「空白主題 blank theme」適用於全客製開發

用此種開發方式,基本上這個專案具有獨特性,非「常態性」網站,比較難用通用的樣式或版面結構去套用,自幹型網站,這種情況就適合使用空白主題 (blank theme),直接以空白主題開發,未來也需要自行維護這個主題

空白主題最大特色就是什麼都沒有,但也並非什麼都沒有,更正確的說法應該是乾淨的主題,預先建立主題檔案結構及初始程式,並遵循 WordPr[……]

Read more

WordPress Elementor RWD CSS breakpoint

WordPress Elementor 提供3種裝置分別是電腦、平板、手機,雖然可以用 CSS @media 比較標準的方式來判斷,但在 Elementor 中斷點的尺寸是一個參數,可以自訂義數值,此狀況若透過客製 CSS,以 @media 這種方式給予響應式的樣式,因為斷點可能會跟Elementor 編輯器產生的內容樣式有差異,除非每改一次斷點寬度,都需要再調整過所有的 CSS @media 斷點數值,或禁止主題去調整斷點寬度數值,但這主題將對 Elementor 不友善,與主題開發以最大化的開發原則背道而馳

Elementor 可以透果 body 上的 data-elementor-devi[……]

Read more

解決 WordPress Astra 主題修改後台編輯器樣式問題

使用 Astra 主題今天遇到了一個很怪的問題,在編輯文章的時候,不知道怎麼搞的,後台文字編輯器的標題及內文,全部都變成白色的,這給客戶肯定被打槍阿!! 花了很多時間找這個問題,並解決它了,如果你也正遇到這個問題這也許對你會有幫助

除錯開始

透過 Chrome 開發者工具,找到一串修改後台編輯器樣式的行內樣式 (inline style),就是這一串樣是在搞鬼,由 style 標籤上的 id ,「astra-block-editor-styles-inline-css」看得出來是 Astra 給的行內樣式,不過 Astra 又為什麼要給這個行內樣式呢? 找了一下資料,不知道WP 從哪一版開始,後台[……]

Read more

WordPress paginate_links for Bootstrap

WordPress 有提供一個 paginate_links function 來製作頁碼,可以直接輸出html,但實務上,所輸出的頁碼 html 結構並不一定符合我們的需要,尤其我們是套前端設計師所給的 html 檔案,我們就必須忠實還原它的結構,我們以 Bootstrap 來說,它的結構就跟 paginate_links 所吐出來的 html 頁碼有很大的不同,這時我們就要部份透過客製的方法來處理。

以下方法一樣透過 WordPress paginate_links 這個方法來計算相關頁碼的數據,但回傳格式選 array,如此將會連結用陣列方式回傳,再用這些回傳的連結陣列來套用成我們需要的格[……]

Read more