如何在WordPress中新增短程式碼

短程式碼是一種將動態內容新增到WordPress文章、頁面和側邊欄的簡單方法。

許多WordPress外掛和主題使用短程式碼來新增專門的內容,如聯絡表格、圖片庫、滑塊等。

在本教程中,我們將向您展示如何在WordPress中輕鬆新增短程式碼。我們還將向您展示如何在WordPress中建立您自己的自定義短程式碼。

如何在WordPress中新增短程式碼

什麼是短程式碼?

WordPress中的簡碼是程式碼快捷方式,可幫助您在WordPress文章、頁面和側邊欄小部件中新增動態內容。它們顯示在方括號內,如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[myshortcode]
[myshortcode]
[myshortcode]

為了更好地理解短程式碼,讓我們先來看看為什麼新增它們的背景。

WordPress過濾所有內容以確保沒有人使用文章和頁面內容在資料庫中插入惡意程式碼。這意味著您可以在文章中編寫基本的HTML,但不能編寫PHP程式碼。

但是,如果您想在文章中執行一些自定義程式碼來顯示相關文章、橫幅廣告、聯絡表單、畫廊等,該怎麼辦?

這就是Shortcode API的用武之地。

基本上,它允許開發人員將他們的程式碼新增到一個函式中,然後將該函式作為短程式碼註冊到WordPress,因此使用者無需任何編碼知識即可輕鬆使用它。

當WordPress找到短程式碼時,它會自動執行與之關聯的程式碼。

讓我們看看如何在您的WordPress文章和頁面中輕鬆新增短程式碼。

在WordPress文章和頁面中新增短程式碼

首先,您需要編輯要新增短程式碼的文章和頁面。之後,您需要單擊新增塊按鈕以插入短程式碼區塊。

插入短程式碼區塊

新增短程式碼區塊後,您只需在區塊設定中輸入您的短程式碼即可。短碼將通過各種WordPress外掛來提供,你可能如使用是WPForms的聯絡表單,OptinMonster的電子郵件營銷表單,WP Call button插入一個撥打電話按鈕,等等。

插入不同外掛的短程式碼

要了解有關使用區塊的更多資訊,請參閱我們的古騰堡教程以獲取更多詳細資訊。

您現在可以儲存您的文章或頁面並預覽您的更改以檢視正在執行的短程式碼。

在WordPress側邊欄小工具中新增短程式碼

您還可以在WordPress側邊欄小工具中使用短程式碼。只需訪問外觀»小工具頁面並將“文字”小部件新增到側邊欄。

現在您可以將您的短程式碼貼上到小工具的文字區域內。

新增短程式碼至小工具

不要忘記單擊“Save”按鈕來儲存您的小工具設定。

之後,您可以訪問您的WordPress網站,在側邊欄小部件中檢視短程式碼的實時預覽。

在舊的WordPress經典編輯器中新增短程式碼

如果您仍在WordPress中使用舊的經典編輯器,那麼您可以通過以下方式向WordPress文章和頁面新增短程式碼。

只需編輯要新增短程式碼的文章和頁面。您可以將短程式碼貼上到內容編輯器中要顯示的任何位置。只要確保短程式碼在它自己的行中。

經典編輯器插入短程式碼

不要忘記儲存您的更改。之後,您可以預覽您的帖子和頁面以檢視正在執行的短程式碼。

如何在WordPress主題檔案中新增短程式碼

短程式碼旨在用於WordPress文章、頁面和小部件。但是,有時您可能希望在WordPress主題檔案中使用短程式碼。

WordPress可以輕鬆做到這一點,但您需要編輯WordPress主題檔案。

基本上,您只需新增以下程式碼即可向任何WordPress主題模板新增短程式碼。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php echo do_shortcode("[your_shortcode]"); ?>
<?php echo do_shortcode("[your_shortcode]"); ?>
<?php echo do_shortcode("[your_shortcode]"); ?>

WordPress現在將查詢短程式碼並在您的主題模板中顯示其輸出。

如何在WordPress中建立自己的自定義短程式碼

當您想在WordPress文章和頁面中新增動態內容或自定義程式碼時,簡碼非常有用。但是,如果您想建立自定義短程式碼,則需要一些編碼經驗。

如果您對編寫PHP程式碼感到滿意,那麼這裡有一個示例程式碼,您可以將其用作模板。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// function that runs when shortcode is called
function wpb_demo_shortcode() {
// Things that you want to do.
$message = 'Hello world!';
// Output needs to be return
return $message;
}
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');
// function that runs when shortcode is called function wpb_demo_shortcode() { // Things that you want to do. $message = 'Hello world!'; // Output needs to be return return $message; } // register shortcode add_shortcode('greeting', 'wpb_demo_shortcode');
// function that runs when shortcode is called
function wpb_demo_shortcode() { 
// Things that you want to do. 
$message = 'Hello world!'; 
// Output needs to be return
return $message;
} 
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');

在這段程式碼中,我們首先建立了一個執行一些程式碼並返回輸出的函式。之後,我們建立了一個名為“greeting”的新短程式碼,並告訴WordPress執行我們建立的函式。

您現在可以使用以下程式碼將此短程式碼新增到您的文章、頁面和小部件中:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[greeting]
[greeting]
[greeting]

它將執行您建立的函式並顯示所需的輸出。

現在讓我們來看看短程式碼的更實際用法。在此示例中,我們將在短程式碼中顯示Google AdSense廣告banner。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// The shortcode function
function wpb_demo_shortcode_2() {
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-0123456789101112"
data-ad-slot="9876543210"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';
// Ad code returned
return $string;
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2');
// The shortcode function function wpb_demo_shortcode_2() { // Advertisement code pasted inside a variable $string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-0123456789101112" data-ad-slot="9876543210"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>'; // Ad code returned return $string; } // Register shortcode add_shortcode('my_ad_code', 'wpb_demo_shortcode_2');
// The shortcode function
function wpb_demo_shortcode_2() { 
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-0123456789101112"
data-ad-slot="9876543210"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';
// Ad code returned
return $string; 
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2');

不要忘記用您自己的廣告程式碼替換廣告程式碼。

您現在可以在WordPress文章、頁面和側邊欄小部件中使用 [my_ad_code] 短程式碼。WordPress將自動執行與短程式碼關聯的功能並顯示廣告程式碼。

簡碼與古騰堡區塊

使用者經常問我們簡碼與新古騰堡塊之間的區別。

基本上,如果您發現短程式碼有用,那麼您會喜歡WordPress編輯器區塊。塊允許您以更使用者友好的方式做同樣的事情。

與要求使用者新增用於顯示動態內容的短程式碼不同,區塊允許使用者使用更直觀的使用者介面在文章/頁面中新增動態內容。許多流行的WordPress外掛都改用Gutenberg區塊而不是短程式碼,因為它們對初學者更友好。

最後,希望本教程能幫助您瞭解如何在WordPress中新增短程式碼。

評論留言