Hướng dẫn WordPress: Cách tạo một plugin lật trang tuyệt vời

Bài viết được viết bởi:
  • Inbound Tiếp thị
  • Cập nhật: Tháng Chín 15, 2014

Lưu ý: Chúng tôi không còn hỗ trợ plugin WP này vì tác giả hiện không viết thư cho chúng tôi.

Bắt đầu từ ngày hôm nay, mỗi tuần chúng tôi sẽ giới thiệu một hướng dẫn mã hóa tuyệt vời, hướng dẫn bạn cách thực hiện các công cụ tùy chỉnh bằng cách sử dụng WordPress, từ cơ bản đến nâng cao. Hôm nay chúng ta sẽ tạo một plugin (vì vậy bạn sẽ tìm hiểu các bước cơ bản về điều này) để tạo một thư viện “lật trang”, sử dụng JS.

Tôi cá là bạn đã thấy một trong số đó trong những ngày đầu của bạn, nhưng chúng hầu hết được thực hiện bằng flash, mà bây giờ là không được chấp nhận (nó vẫn có giá trị của nó, nhưng nó không phải là lựa chọn tốt nhất cho loại điều này nữa).

Chức năng cơ bản sẽ tạo mới loại thư viện dựa trên một vài hình ảnh và kích thước của chúng, thông qua shortcode.

Hãy bắt đầu sau đó!

Zip & Cài đặt

Cách tốt nhất để xem nó trong hành động là cài đặt nó cho mình. Bạn có thể tải về tại đây. Cài đặt và kích hoạt plugin, sau đó tất cả những gì bạn cần làm là thêm shortcode vào một trang, như sau:

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

Xem trước nhanh

Và đây là loại kết quả mà bạn sẽ nhận được:

Hiệu ứng Flipbook

Nhưng loại ma thuật đen nào có trên đó? Vâng, nó thực sự khá đơn giản. Hãy tìm hiểu cách tạo ra một cái gì đó như thế này.

Tiêu đề

Trước hết, bạn cần phải tạo một thư mục mới và tệp .php mới. Tại thời điểm này nó sẽ là tuyệt vời nếu bạn có một môi trường thử nghiệm, vì vậy bạn có thể phá vỡ và kiểm tra các công cụ.

Tệp và thư mục phải có tên đơn giản và độc đáo, vì vậy bạn sẽ tránh xung đột với các plugin hiện có. Sau đó, nội dung cơ bản của tệp của chúng tôi là một cái gì đó như thế này:

/ * Tên plugin: Thư viện FlipBook Mô tả: Tạo một mã ngắn cho các phòng trưng bày flipbook. Phiên bản: 1.0 Tác giả: Blog Doanh thu Web Giấy phép: GPL2 * /

Khá đơn giản, huh? Một khi bạn tạo tập tin này, bạn sẽ thấy plugin của bạn trong danh sách dưới WP admin> Plugins, và bạn có thể kích hoạt nó (nhưng nếu bạn chỉ có nội dung này trong tập tin của bạn nó sẽ không thay đổi rất nhiều trang web của bạn).

Tập lệnh gọi

Bây giờ chúng ta cần bao gồm một số tài sản bên ngoài quan trọng ở đây. Các tệp bên ngoài được yêu cầu cho chức năng cơ bản là:

  • jQuery (1.9 +)
  • Tập lệnh Turn.js
  • Bật kiểu cơ bản

Nếu bạn chỉ cần thêm các tập lệnh và thẻ kiểu, bạn sẽ có một số vấn đề. Ví dụ, cuộc gọi jQuery đôi có thể sẽ phá vỡ trang web của bạn. Ngoài ra, chính WordPress cũng sẽ không "biết" rằng bạn đã tạo các mục đó, vì vậy nếu một plugin khác gọi turn.js một lần nữa hoặc một kiểu dáng khác, nó sẽ phá vỡ trang web của bạn.

Đó là lý do tại sao chúng ta nên luôn sử dụng hàm wp_enqueue_script và wp_enqueue_style. Đây là cách sử dụng cơ bản:

chức năng plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('lượt', plugins_url ('js / Turn.js', __FILE__), mảng ('jquery'), '1.3', sai); wp_enqueue_style ('TurnCSS', plugins_url ('css / style.css', __FILE__), sai, '1.3', 'all'); }

Chúng tôi đang gọi các mặt hàng bên ngoài trong 3 cách khác nhau, ở đây họ là:

  • Gọi một mục hiện có: jQuery - Chúng ta không cần truyền nhiều thông số nếu chúng ta biết chắc chắn rằng WordPress đã tải tập lệnh này, chúng ta chỉ nói với anh ta “Dude, kịch bản này PHẢI ở đây nếu không mã của chúng ta sẽ không công việc"
  • Tạo một kịch bản mới - bạn sẽ cần phải truyền một số thuộc tính như tên, vị trí tệp, các mục cần thiết (trong trường hợp này nó yêu cầu jQuery), phiên bản và nếu nó được tải trong chân trang hoặc đầu trang (false = header, true = footer)
  • Tạo kiểu mới - Khá giống với kiểu trước, với sự khác biệt nhỏ trong thuộc tính cuối cùng, cho biết loại phương tiện nào kiểu này nếu

Một trong những điều quan trọng bạn nên xem xét khi bạn gọi các kịch bản bên ngoài là nếu có nhiều mã sẽ phụ thuộc vào plugin này. Đó là cơ bản những gì xác định nếu tập tin của bạn sẽ được gọi trong phần đầu trang hoặc chân trang.

Trong trường hợp của chúng tôi, chúng tôi có một số tập lệnh bổ sung để thiết lập bộ sưu tập chỉ khi HTML của nó được tạo và sẽ được thêm vào nội dung. Đây là lý do tại sao chúng ta phải thêm tập lệnh này vào đầu, nếu không thì mã của chúng ta được gọi là hàm “turn” chưa có.

Sau đoạn mã đẹp này, chúng ta cần phải nói với WordPress để tải chúng như các kịch bản lệnh, hành động “wp_enqueue_scripts” sẽ làm điều này:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

Shortcode

Hãy bắt đầu với hành động để tạo shortcode. Nó khá đơn giản, bạn chỉ cần thêm kích hoạt shortcode và chức năng sẽ được thực thi:

add_shortcode ("flip_book", "create_flip_book");

Bây giờ chúng ta cần tạo ra chức năng của mình và lấy các thuộc tính của chúng ta. Nhưng một số thuộc tính có thể là tùy chọn, có nghĩa là chúng ta sẽ cần tạo các giá trị mặc định cho chúng. Chúng tôi có thể tạo ra rất nhiều nếu có thử nghiệm nếu thuộc tính là trống rỗng, nhưng đây là một trong những trường hợp hoạt động ternary là tốt hơn so với thường xuyên nếu cuộc gọi.

Các phép toán bậc ba là kiểu nếu các câu lệnh trực tiếp trong giá trị của biến. Nếu theo cấu trúc này:

$ variable = (CONDITION)? "VALUE IF CONDITION LÀ TRUE": "VALUE IF CONDITION IS FALSE";

Bạn có thể thấy chúng hoạt động trong phần đầu tiên của hàm của chúng tôi:

function created_flip_book ($ attr) {// Chuẩn bị ID để được xử lý $ mảng ['ids'] = explode ("", $ attr ['ids']); // chế độ hiển thị $ mảng ['display'] = blank ($ attr ['display'])? "đơn": $ attr ['display']; // giá trị tiêu chuẩn // width $ mảng ['width'] = blank ($ attr ['width'])? 400: $ attr ['width']; // height $ mảng ['height'] = blank ($ attr ['height'])? 300: $ attr ['height'];
    // HTML và phần còn lại của mã ở đây}

Sau đó, chúng tôi sẽ cần tạo HTML và cuộc gọi cơ bản cho hình ảnh của chúng tôi. Một điểm quan trọng khác ở đây là điều chỉnh kích thước nếu chúng ta sử dụng kiểu tạp chí (nên là 2x chiều rộng vì chúng ta sẽ có hình ảnh 2 thay vì một):

<? php if ($ mảng ['display'] == "double") {$ mảng ['width'] = $ mảng ['width'] * 2; } // HTML, JS và Black Magic?> <Div id = "flipbook"> <? Php cho ($ i = 0; $ i <sizeof ($ mảng ['ids']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ mảng ['ids]] [$ i],' full '); if ($ mảng ['display'] == "single") {?> <span> <? = "". ($ i + 1)?> / <? echo "" .sizeof ($ mảng ['ids]])?> </ span> <? php} khác {?> <spanright ":" left ");?>"> <? i + 1)?> / <? echo "" .sizeof ($ mảng ['ids]]); ?> </ span> <? php}?> </ div> <? php}?> </ div> <script type = "text / javascript"> jQuery ("# ​​flipbook"). Turn ({width: <width ? php echo $ mảng ['width'];?>, height: <? php echo $ mảng ['height'];?>, autoCenter: true, display: '<? php echo $ mảng [' display ']; ?> ', // trang đơn hoặc tăng tốc trang kép: true, độ dốc :! jQuery.isTouch,}); </ script>

Bạn nghĩ gì?

Giờ đây, bạn có thể tinh chỉnh và sửa đổi điều này theo ý muốn, thêm nhiều tùy chọn hơn (xem ví dụ tuyệt vời của họ để có thêm cảm hứng), điều chỉnh những gì không hiệu quả với bạn hoặc kết hợp điều này với các plugin khác.

Bạn có bất kỳ khái niệm WordPress nào bạn muốn tìm hiểu thêm một chút không? Có lẽ một cái gì đó bạn muốn tìm hiểu làm thế nào để làm gì? Hãy cho chúng tôi biết qua nhận xét và chúng tôi sẽ rất vui khi bao gồm điều này trong một bài đăng trong tương lai!

Giới thiệu về Olive Oliveira

Tôi là một nhà thiết kế web và doanh nhân từ Itajubá (MG), Brasil. Tôi thích viết về những chủ đề tối nghĩa và làm một số thứ hay ho.

Kết nối: