WordPress shortcode 函式教學 – 建立自定義短碼顯示文字及圖片

WordPress 使用函數建立自定義 shortcode:

1.  自訂 shortcode 函數顯示文字及圖片

WordPress shortcode 在網頁設計時是非常彈性的功能,當需要在特定位置加入想要呈現的內容,卻受限於網站主題框架無法以內建編輯器或區塊小工具完成時,就可以選擇自行創建 shortcode 函式定義想要顯示的內容,只要在 HTML 區塊中加入 shortcode ,就能夠在網站主題不支援編輯的位置顯示特定文字或圖片,本篇文章分享的 shortcode 函式相當簡單,只需按照步驟就能夠完成,如果想了解更多 shortcode 知識,可參考 WordPress Shortcode 教學 – 網頁設計基礎,運用簡碼加入網頁內容元素

WordPress codex shortcode 函數參考:https://codex.wordpress.org/Function_Reference/add_shortcode

WordPress codex shortcode API:https://codex.wordpress.org/Shortcode_API

• 使用 add_shortcode 函數

第一步:在下方的函式中,dh_first_shortcode 是可以自定義的名稱,但要注意如果有更改,函式結尾處的 add_shortcode 內容也必須要替換成一樣的名稱。而這段函式所代表的意義就是定義當 dh_first_shortcode 這段文字以代碼的形式在 HTML 中出現時,將自動輸出(echo)文字 ” shortcode教學 ” 以及檔案位置為 ‘ http://demo7.design-hu.tw/wp-content/uploads/鵠崙設計-favicon.png ‘ 的圖片,也就是在網頁上顯示。

加入方式為選擇子主題模板,在 funtions.php 檔案內容結尾處加入此段函式即可,如下圖所示。

WordPress shortcode

 

第二步:以 WordPress 傳統編輯器而言,只需加入剛剛定義的 shortcode 名稱,並在前後加上 [ ] 符號即可。

WordPress shortcode

 

第三步:完成後就會在網頁上顯示我們所定義的文字與圖片,如下圖所示。

WordPress shortcode

 

第四步:在本來的函式中,我們只單純輸出文字,因此在外觀上不會套用網站主題既有的 CSS 樣式表,此時只需要為文字加入 HTML 標籤以及 CSS 類名稱,以下圖為例,設定文字為 h2 就會套用網站中對 h2 既有的樣式,比如字體粗細與大小。

WordPress shortcode

 

第五步:更新後在重新整理網頁,文字就會套用 h2 標籤的樣式了。

WordPress shortcode

結語:

shortcode 寫法可以有很多種,另外一種比較複雜的甚至可以在代碼中直接加入篩選條件,比如說文章 loop 可以使用 shortcode_atts 來制定規則,以控制網站前端只顯示特定的分類文章,shortcode 看起來就會像 [dcat cat=”cat_id”],只要輸入文章分類 id ,就能只顯示特定分類的文章,這是屬於比較進階的寫法,之後鵠學苑也會陸續分享喔!

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

WordPress PHP 自訂網站 相關教學文章:

WooCommerce 關閉密碼強度 – WordPress 加入函數與啟用外掛

WordPress 禁用 Gutenberg 編輯器的兩種方法(外掛與函數)

WordPress 小工具 ( Widget ) 增加自定義模組區塊( OceanWP)

WordPress 自訂欄位,網站後台公佈欄自訂資訊內容,PHP語法應用

使用 Google 自訂搜尋引擎取代WordPress站內搜尋步驟教學

關閉WordPress圖片自動縮圖 – 提升整體網站速度及載入網頁速度

網站架設知識推薦閱讀:

Chrome 移除蓋版廣告?Google 12 項廣告體驗規範簡易說明

Google One 介紹 – 全新雲端硬碟方案,擴充更多儲存空間!

無障礙網站介紹-規範說明、檢測工具與操作影片

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top