WordPress教程:如何創建推薦插件

文章撰寫者:
  • WordPress
  • 更新:Aug 12,2013

所以,這裡我們是關於WordPress的第二個每週教程。 我們已經學會瞭如何創建一個 無限滾動WP站點 - 翻頁插件 在過去。 今天我們將更多地了解自定義帖子類型以及如何加載他們的數據。

此功能在您的網站中非常重要,因為它可以讓您向推薦給您的人展示。 推薦書是您卓越的一個很好的社會證明。 而且你不需要復雜的插件或很多代碼來實現這一點,因為你會看到幾個文件,你可以為你的推薦創建一個性感的演示文稿。

讓我們開始吧!

郵編和安裝

如果你急於檢查這個,你可以 下載 並安裝它。

您需要添加一些數據,然後使用全新的推薦書添加一些推薦信,您可以在信息中心看到:

列表推薦

然後你可以使用基本的短代碼加載:

[testimonials rand = 0 max = 5]

當您添加該代碼後,您會在頁面中看到以下內容:

主推薦

現在我們將看到如何創建和探索它(通過添加更多功能和更改外觀)。

基本款式

正如我們之前所說,你需要添加 標頭元數據,創建插件文件並調用腳本。 簡而言之,您將使用插件的名稱在wp-content / plugins下創建一個新文件夾,然後創建一個與該文件夾同名的文件作為主插件文件。

完成該複製並粘貼後,如下所示:

<?php / *插件名稱:推薦說明:顯示客戶推薦。 版本:1.0作者:Web收入博客許可證:GPL2 * / //入隊腳本和样式函數plugin_scripts(){wp_enqueue_script('jquery'); wp_enqueue_script('flexslider',plugins_url('js / jquery.flexslider-min.js',__ FILE__),array('jquery'),'2.2',false); wp_enqueue_script('testimonials',plugins_url('js / testimonials.js',__ FILE__),array('jquery'),'1.0',false); wp_enqueue_style('flexsliderCSS',plugins_url('css / flexslider.css',__ FILE__),false,'2.2','all'); wp_enqueue_style('testimonialsCSS',plugins_url('css / testimonials.css',__ FILE__),false,'1.0','all'); } add_action(“wp_enqueue_scripts”,“plugin_scripts”);

這是我們正在做的事情:

  • 告訴WP什麼是我們的插件名稱,作者,它做什麼
  • 創建一個函數,我們插入常規腳本(如jQuery)和自定義腳本(如flexslider)和样式表
  • 告訴WP在其默認腳本調用中加載腳本函數,因此它們實際上將被加載到頁面中

這一切都很酷,但不要忘記在/ js和/ css下實際創建文件。 您可以在我們的演示內容中下載它們,這樣您就不需要花費太多時間來查找flexslider文件。

現在我們已經掌握了所有基本的東西,我們可以開始有趣的部分。

自定義帖子類型

默認情況下,WordPress具有2常見的帖子類型,頁面和帖子。 但它也有很多內部帖子類型(如附件),因此“帖子類型”定義是:您需要存儲的每種類型的數據。

由於我們的插件將創建一個新的功能,WP沒有內置的存儲位置,所以我們需要創建它。 不要害怕小蚱蜢,這很簡單,你可以使用這段代碼:

//創建帖子類型函數的黑魔法create_post_type(){register_post_type('testimonials',//新帖子類型數組('labels'=> array('name'=> __('Testimonials'),'singular_name' => __('Testimonial')),'public'=> true,/ *帖子類型供公眾使用。這包括在前端和wp-admin。* /'supports'=> array('title ','editor','thumbnail','custom_fields'),'hierarchical'=> false)); }

這裡我們只是使用register_post_type()函數告訴WP“嘿伙計,我們需要存儲這類數據,請準備接收它”。

我們還告訴他,這種數據稱為“推薦”,它應該可供公眾訪問(因此它實際上在儀表板中為它創建了一個新的菜單項),我們需要的字段,以及它是否是分層的或不(如我們有父頁和子頁的頁面)。

然後我們需要在每次加載WordPress時調用它。 這個鉤子會這樣做:

add_action('init','create_post_type');

自定義字段

現在我們的自定義帖子類型有標題(人名),內容(人的推薦),圖片(特色圖片)但它缺少一個鏈接,因為如果這個人足夠好談論你,你應該至少鏈接到他們的網站,對嗎?

我們可以使用常用的自定義字段執行此操作,但最好有一個“關閉”字段,用戶不需要鍵入字段名稱,也可以添加一些驗證規則。

首先,我們需要創建一個新的元數據框,這是您在帖子編輯區域中有的漂亮面板,每個小面板都是一個元數據框。 這個函數將創建並調用它:

//添加URL元框字段函數add_custom_metabox(){add_meta_box('custom-metabox',__('Link'),'url_custom_metabox','testimonials','side','low'); } add_action('admin_init','add_custom_metabox');

add_meta_box()函數需要以下參數:

  1. ID - 它的唯一標識符。 你可以使用任何獨特的東西,如“獨角獸吃彩虹”或“推薦鏈接”。 任何可以在內部使用的東西
  2. 標題 - 將為用戶顯示什麼? 這裡使用__()函數很重要,它是允許外語用戶使用.po文件翻譯插件的功能(無需編輯插件文件)
  3. 回調 - 您擁有元數據的實際內容的函數
  4. 帖子類型 - 在我們的案例中,我們希望它只對推薦書可見
  5. 上下文 - 您希望在頁面中顯示的位置
  6. 優先級 - 如果它應該在相同位置的其他項目之前或之後

現在我們需要創建url_custom_metabox()函數,因為我們已經調用它。

//管理區域功能的HTML url_custom_metabox(){global $ post; $ urllink = get_post_meta($ post-> ID,'urllink',true); //證實! if(!preg_match(“/ http(s?):///”,$ urllink)&& $ urllink!=“”){$ errors =“此網址無效”; $ urllink =“http://”; } //輸出invlid url消息並將http://添加到輸入字段if(isset($ errors)){echo $ errors; }> <p> <label for =“siteurl”>網址:<br /> <input id =“siteurl”size =“37”name =“siteurl”value =“<?php if(isset($ urllink) ){echo $ urllink;}?>“/> </ label> </ p> <?php}

好的,現在把它翻譯成普通英語:

  • 調用全局變量$ post,因此我們可以知道哪個是當前項的POSTID
  • 我們加載URL的當前值
  • 我們驗證如果用戶插入的值有效。 如果至少有一個“http”或“https”出現,則值為OK,否則它是有效的,我們需要使用默認值
  • 然後我們會顯示錯誤,如果有的話
  • 現在我們啟動實際的HTML,在輸入字段中添加默認值,就像我們在PHP中獲得的那樣

在此之後,我們需要實際保存用戶發送的內容。 我們將使用“save_post”掛鉤,所以每次WordPress保存帖子時它都會調用此函數:

//保存自定義字段數據函數save_custom_url($ post_id){global $ post; if(isset($ _ POST ['siteurl'])){update_post_meta($ post-> ID,'urllink',$ _POST ['siteurl']); add_action('save_post','save_custom_url');

在這裡,我們只檢查是否有任何名為“sitelink”的帖子數據,這是我們的字段名稱。 如果有附加鏈接,我們保存吧。

一切就緒後,您的新推薦頁面將如下所示:

新告別賽

加載我們的自定義數據

現在我們需要實際加載我們的項目,我們將使用get_posts()函數,主要是因為我們只有簡單的數據,所以我們不需要一個合適的WP循環(這將增加大量的數據庫調用,我們真的不喜歡不需要它。

所以,首先讓我們創建一個函數來獲取我們網站的鏈接,如果有的話。

//返回帖子函數的URL get_url($ post){$ urllink = get_post_meta($ post-> ID,'urllink',true); return $ urllink; }

現在,我們可以啟動短代碼功能。 默認和驗證短代碼數據的一種簡單方法是將循環的屬性創建為數組,因此我們可以根據需要添加新項目,如下所示:

//註冊短代碼以顯示推薦函數load_testimonials($ a){$ args = array(“post_type”=>“testimonials”); if(isset($ a ['rand'])&& $ a ['rand'] == true){$ args ['orderby'] ='rand'; } if(isset($ a ['max'])){$ args ['posts_per_page'] =(int)$ a ['max']; } //獲取所有推薦書$ posts = get_posts($ args); // HTML OUTPUT} add_shortcode(“testimonials”,“load_testimonials”);

正如您所看到的那樣,我們已經加載了短代碼屬性並在它們以WordPress需要的格式驗證時傳遞給$ args數組,因此我們可以使用它們加載帖子。

現在我們需要在flexslider的默認結構之後添加一些HTML代碼。 這是它的樣子:

echo'<div>'; echo'<ul>'; foreach($ posts as $ post){//獲取拇指圖像$ url_thumb = wp_get_attachment_thumb_url(get_post_thumbnail_id($ post-> ID)); $ link = get_url($ post); echo'<li>'; if(!empty($ url_thumb)){echo'<img src =“'。$ url_thumb。'”/>'; } echo'<h2>'。$ post-> post_title。'</ h2>'; if(!empty($ post-> post_content)){echo'<p>'。$ post-> post_content。'<br />'; } if(!empty($ link)){echo' <a href="'.$link.'">訪問網站</a> </ p>'; } echo'</ li>'; echo'</ ul>'; echo'</ div>';

等等,但為什麼我們要在PHP函數內部創建HTML代碼? 這是因為我們只有在用戶添加了內容時才能有條件地加載內容,因此您不會有空的HTML標記,只是等待弄亂您的佈局。

側邊欄怎麼樣?

大多數人只是想在側邊欄中顯示推薦,並且由於文本小部件不處理短代碼,因此該插件不會很好地工作。 有一個簡單的解決方案,只需在您的代碼中添加:

add_filter('widget_text','do_shortcode');

下一步是什麼?

那麼,你喜歡這個教程嗎? 您將添加什麼作為您的推薦短信的選項? 你對未來的帖子有什麼想法嗎? 請使用評論部分告訴我們!

關於羅切斯特奧利維拉

我是來自巴西Itajubá(MG)的網頁設計師和企業家。 我喜歡寫一些關於模糊主題和做一些很酷的東西。

連接: