WordPress教程:如何創建一個很棒的頁面翻轉插件

文章撰寫者:
  • 入站營銷
  • 更新:Sep 15,2014

注意:我們不再支持此WP插件,因為作者暫時沒有為我們寫信。

從今天開始,每週我們都將提供一個很棒的編碼教程,教你如何使用WordPress進行自定義工作,從基礎到高級。 今天我們將創建一個插件(因此您將學習基本步驟)以使用JS生成“頁面翻轉”庫。

我敢打賭你在早期網絡時代已經看過其中一個,但那些大部分都是使用flash完成的,現在已經相當不贊成了(它仍然有它的價值,但它不再是這類東西的最佳選擇)。

基本功能將創建一個新的 畫廊類型 基於一些圖像及其大小,通過短代碼。

讓我們開始吧!

郵編和安裝

看到它的最佳方式是自己安裝它。 您可以 在這裡下載。 安裝並激活插件,然後您需要做的就是在頁面中添加短代碼,如下所示:

[flip_book ids =“78 79 78 79 79 78 78 79 79 78”width =“300”height =“225”display =“double”]

快速預覽

這就是你會得到的結果:

翻書效果

但那裡有什麼樣的黑魔法呢? 嗯,實際上很簡單。 讓我們學習如何創建這樣的東西。

標題

首先,您需要創建一個新文件夾和一個新的.php文件。 在這一點上,如果你有一個測試環境會很棒,所以你可以打破並測試一些東西。

文件和文件夾應具有簡單且唯一的名稱,因此您將避免與現有插件衝突。 那麼我們文件的基本內容是這樣的:

/ *插件名稱:FlipBook Gallery描述:為flipbook畫廊創建一個短代碼。 版本:1.0作者:Web收入博客許可證:GPL2 * /

很簡單,對吧? 創建此文件後,您將在WP admin> Plugins下的列表中看到您的插件,並且您可以激活它(但如果您的文件中只有這些內容,則不會對您的網站進行大量更改)。

調用腳本

現在我們需要在這裡包含一些重要的外部資產。 基本功能所需的外部文件是:

  • jQuery(1.9 +)
  • Turn.js腳本
  • 打開基本造型

如果您只是添加腳本和样式標記,那麼您將遇到一些問題。 例如,雙jQuery調用可能會破壞您的網站。 WordPress本身也不會“知道”你已經創建了這些項目,所以如果另一個插件再次調用turn.js或者不同的樣式,它將會破壞你的網站。

這就是為什麼我們應該總是使用wp_enqueue_script和wp_enqueue_style函數。 這是基本用法:

function plugin_scripts(){wp_enqueue_script('jquery'); wp_enqueue_script('turn',plugins_url('js / turn.js',__ FILE__),array('jquery'),'1.3',false); wp_enqueue_style('turnCSS',plugins_url('css / style.css',__ FILE__),false,'1.3','all'); }

我們以不同的方式調用3中的外部項目,它們是:

  • 調用現有項:jQuery - 如果我們確定WordPress已經加載了這個腳本,我們不需要傳遞很多參數,我們只是告訴他“伙計,這個腳本必須在這裡,否則我們的代碼不會工作”
  • 創建一個新腳本 - 你需要傳遞一些屬性,如名稱,文件位置,所需的項目(在這種情況下,它需要jQuery),版本,如果它在頁腳或標題中加載(false = header,true = footer)
  • 創建一個新樣式 - 與前一個樣式非常相似,在最後一個屬性上有一點不同,它表示這種樣式的媒體類型

當您調用外部腳本時,您應該考慮的重要事項之一是,是否有更多代碼依賴於此插件。 這基本上是定義您的文件是否將在頁眉或頁腳中調用的內容。

在我們的例子中,我們有一些額外的腳本只在創建HTML時才設置庫,並且會在正文中添加。 這就是為什麼我們必須在頭部添加這個腳本,否則當我們的代碼被調用時,“轉”功能還沒有。

在這個很好的代碼之後,我們需要告訴WordPress將它們作為腳本加載,動作“wp_enqueue_scripts”將執行此操作:

add_action('wp_enqueue_scripts','plugin_scripts');

短代碼

讓我們從創建短代碼的操作開始。 這很簡單,你只需要添加短代碼觸發器,以及將要執行的函數:

add_shortcode(“flip_book”,“create_flip_book”);

現在我們需要創建我們的函數並獲取我們的屬性。 但是一些屬性可以是可選的,這意味著我們需要為它們創建默認值。 如果屬性為空,我們可以創建很多if ifs測試,但這是三元操作優於常規if調用的情況之一。

三元運算是直接在變量值中的if語句。 如果遵循這個結構:

$ variable =(CONDITION)? “如果條件有效則值”:“如果條件錯誤則值”;

您可以在我們函數的第一部分中看到它們的運行情況:

function create_flip_book($ attr){//準備要處理的ID $ array ['ids'] = explode(“”,$ attr ['ids']); // display mode $ array ['display'] = empty($ attr ['display'])? “single”:$ attr ['display']; //標準值// width $ array ['width'] = empty($ attr ['width'])? 400:$ attr ['width']; // height $ array ['height'] =空($ attr ['height'])? 300:$ attr ['height'];
    // HTML和其餘的代碼在這裡}

然後我們需要創建HTML,以及對圖像的基本調用。 另一個重點是如果我們使用雜誌樣式調整大小(它應該是2x的寬度,因為我們將有2圖像而不是一個):

<?php if($ array ['display'] ==“double”){$ array ['width'] = $ array ['width'] * 2; } // HTML,JS和Black Magic?> <div id =“flipbook”> <?php for($ i = 0; $ i <sizeof($ array ['ids']); $ i ++){?> < div> <?php echo wp_get_attachment_image($ array ['ids'] [$ i],'full'); if($ array ['display'] ==“single”){?> <span> <?=“”。($ i + 1)?> / <? echo“”.sizeof($ array ['ids'])?> </ span> <?php} else {?> <spanright“:”left“);?>”> <?php echo“”。($ 1 + 1)?> / <? echo“”.sizeof($ array ['ids']); ?> </ span> <?php}?> </ div> <?php}?> </ div> <script type =“text / javascript”> jQuery(“#flipbook”)。turn({width:< ?php echo $ array ['width'];?>,height:<?php echo $ array ['height'];?>,autoCenter:true,display:'<?php echo $ array ['display']; ?>',//單頁或雙頁加速:true,漸變:!jQuery.isTouch,}); </ SCRIPT>

你覺得呢?

現在你可以根據需要調整和修改它,添加更多選項(查看他們的精彩示例以獲得更多靈感),調整不適合你的內容,或將其與其他插件相結合。

你想要學習更多的WordPress概念嗎? 也許你想學習怎麼做? 請通過評論告訴我們,我們很樂意在以後的帖子中加入此內容!

關於羅切斯特奧利維拉

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

連接: