Jump to content
IPSViet.com

Sign in to follow this  
Bim

Hướng dẫn tạo plugin Global Message

Recommended Posts

Bài viết này sẽ hướng dẫn các bạn từng bước để tạo một plugin Global Message để hiển thị một nội dung trên cùng mỗi trang. Qua ví dụ này bạn có thể thành thạo tự tạo cho mình nhiều plugin cơ bản khác.

Trước khi tạo một plugin yêu cầu  bạn phải bật Dev Mode trước. Tham khảo cách bật Dev Mode:

Sau khi đã chuẩn bị Dev Mode, bạn có thể bắt đầu tạo plugin.

Bước 1: Tạo plugin mới

Vào ACP -> System -> Plugins -> bấm nút Creat New, một popup hiện ra, bạn nhập tên thông tin của plugin:

plugin0.thumb.png.cc8083e56e930094ca8d2d

Lưu ý Plugin Directory bạn chỉ được phép dùng ký tự chữ số, không ký tự lạ và khoản trắng.

Sau đó bấm Save, bạn sẽ thấy Global Message hiện ở danh sách các plugin. Tiếp theo bấm mũi tên thả xuống và chọn Developer center

plugin00.thumb.png.94d0da468a004648525c9

Giao diện Dev mode của plugin như thế này

plugin1.thumb.png.11aa06f88c9344a5e9bfc7

Bước 2: Tạo Theme Hook

Cách đơn giản nhất để thêm nội dung ở đầu trang là sử dụng Theme Hook. Theme hook cho phép bạn chỉnh sửa nội dung của một template bit, hoặc thêm vào bất kỳ nội dung nào. Ở ví dụ này, chúng ta cần edit template globalTemplate ở location "front" của app "core".

Bấm Creat Hook, một popup hiện lên, chọn Theme Hook chỗ Hook Type và "core --> front: global" ở chỗ Template Group, Filename đặt globalmessage.php

plugin2.thumb.png.92e179bbeaab293c21c422

Bấm Save bạn sẽ thấy một hook mới được tạo ra, bấm hình cây viết chì để Edit

plugin3.thumb.png.46eba42c7203fa870698a5

Bây giờ chọn globalTemplate ở cột bên trái. 

plugin4.thumb.png.80dd238a558aab4c615deb

CSS Selector tạm hiểu là một dấu móc dựa theo class hoặc ID của CSS. Ở đây để thêm nội dung bên trên, vị trí tốt nhất là cho nó nằm bên trên phần

<div id="ipsLayout_mainArea">

Bạn bấm nút Select Element và chọn ngay code bên trên là được.

Còn ở Action, chọn Insert content inside the chosen element(s), at the start. Như vậy nội dung của bạn sẽ được nằm trên code div đó.

Tiếp tục, ở Content cho nội dung ví dụ như sau vào

<div class="ipsMessage ipsMessage_information">Ví dụ plugin Global Message tại ipsviet.com</div>

Bấm Save. Ra lại trang chủ bạn sẽ thấy kết quả:

plugin5.thumb.png.f43a94ba496d03cea08528

Phần sau đây sẽ là những bước nâng cao cho plugin hoàn chỉnh hơn.

Bước 3: Sử dụng template riêng:

Như bên trên là bạn sử dụng trực tiếp html code vào trong file hook, như vậy sẽ bất tiện nếu như người dùng cuối cần chỉnh sửa code. Để khắc phục vấn đề đó, bạn nên sử dụng template bit cho plugin của bạn. Rất dơn giản, chỉ cần vào thư mục cài đặt IPS, tiếp tục vào /plugins/globalmessage/dev/html/ tạo một file mới tên globalMessage.phtml với nội dung

<ips:template parameters="" />
<div class="ipsMessage ipsMessage_information">
    Ví dụ plugin Global Message tại ipsviet.com
</div>

Dòng trên cùng để khai báo parameters, ở ví dụ này chưa cần thiết và bạn ko được chỉnh sửa thay đổi hay xóa nó đi. Như vậy bạn đã có một template bit tên là globalMessage cho plugin của bạn. Bây giờ chỉ cần làm sao cho file hook hiểu nội dung sẽ dẫn tới template mới tạo. Bạn edit lại hook bên trên, chỗ content thay thế toàn bộ bằng

{template="globalMessage" group="plugins" location="global" app="core"}

Đó là template tag lấy nội dung từ một template bit. Mặc định các template của plugin sẽ được đặt ở app core, location global, group plugins cho nên bạn chỉ cần nhớ cấu trúc nó như vậy, chỉ cần thay đổi cái tên của template.

Bước 4: Sử dụng Settings và Language Strings

Mình sẽ ví dụ làm sao để cho nội dung linh hoạt hơn bằng cách tạo một setting để hiệu chỉnh nó bất kỳ lúc nào. Ở giao diện thiết kế plugin, chọn tab Settings. Chỗ Setting key nhập vào globalMessage_content và bấm Save.

Truy cập vào thư mục /plugins/globalmessage/ bạn sẽ thấy một file tên là settings.rename.php và đổi tên nó thành settings.php 

Mở file đó lên sẽ thấy một nội dung mẫu. Cái chúng ta cần bây giờ là tạo một textarea để nhập nội dung tùy chỉnh, sử dụng code sau thay thế cho dòng code đầu ( $form->add(.... ) )

$form->add( new \IPS\Helpers\Form\TextArea( 'globalMessage_content', \IPS\Settings::i()->globalMessage_content  ) );

Code đó sử dụng Form Helper mà mình sẽ nói thêm ở các bài sau.

Bây giờ bạn vào lại trang Plugins, ở Global Message bạn sẽ thấy xuất hiện hình cây viết chì:

plugin6.thumb.png.3f7688e9276bfca19017c5

Bấm vô đó bạn sẽ thấy được setting bạn vừa tạo:

plugin7.thumb.png.355bd7aebbe8169789ad62

Tuy nhiên cái tên plugin nó là globalMessage_content ko được đẹp lắm, đó là vì bị thiếu language string, để tạo language string, mở file \plugins\globalmessage\dev\lang.php . Mỗi language string nằm trong một phần của array lớn:

$lang = array(

'globalMessage_content'	=> "Message",

);

Bây giờ tên của setting đó đã được hiển thị là Message.

Tiếp tục, để áp dụng setting vừa tạo, cần edit lại template cũ, dùng nội dung mới như sau:

<ips:template parameters="" />
<div class="ipsMessage ipsMessage_information">
    {{if settings.globalMessage_content}}
        {setting="globalMessage_content"}
    {{else}}
        Ví dụ plugin Global Message tại ipsviet.com
    {{endif}}
</div>

Nghĩa như nếu cài đặt globalMessage_content có thì sử dụng chính nó, ngược lại dùng nội dung mặc định. Tham khảo thêm 

Plugin như thế đã hoàn chỉnh phần cơ bản, bạn có thể chế biến thêm cho phù hợp với nhu cầu sử dụng. Bây giờ thì bấm Download để xuất ra file .xml và chia sẽ.

Ngoài ra, bạn cần nắm rõ thêm 2 điều sau:

CSS cho plugin:

Cực kỳ đơn giản, bạn không phải viết thêm code để đưa css vô, chỉ cần tạo file .css đặt nó vào \plugins\globalmessage\dev\css\ thì IPS sẽ tự động load nó cho bạn.

JS cho Plugin:

Việc cần làm cũng chỉ là chép file .js vào \plugins\globalmessage\dev\js là IPS sẽ tự động load nó.

Images cho plugin:

Chép tất cả hình ảnh vào \plugins\globalmessage\dev\resources\ không được tạo sub folder. Để hiển thị hình ảnh thì dùng code sau, chỉ được thay đổi tên hình ảnh

<img src='{resource="plugins/example.jpg" app="core" location="global"}' />

Như vậy qua ví dụ này các bạn đã nắm rõ cách làm một plugin, sử dụng theme hook, settings, lang string, template bit... Bạn có thể sáng tạo ra nhiều plugin hay khác chỉ cần bạn biết cơ bản về PHP và HTML. IPSViet.com rất mong sẽ nhận được nhiều plugin hay chia sẽ từ các bạn. 

  • Like 2

Share this post


Link to post
Share on other sites

Category của Downloads:

Hidden Content

    Give reaction to this post to see the hidden content.

Chọn group thành viên

Hidden Content

    Give reaction to this post to see the hidden content.

Thay key của settings lại thôi.

  • Like 2

Share this post


Link to post
Share on other sites

Thằng IPS 4 đang theo hướng OOP , tương lai có nhiều thứ để làm. he he

Nhưng theo cá nhân mình thì các API và var vẫn còn rườm rà

Edited by ncxn

Share this post


Link to post
Share on other sites
8 hours ago, Chia Sẻ Vui said:

Cho e hỏi e cài plugin Recent Topics trong 4.1.17. Em muốn bật tắt seting plugin đó thì vào đâu ạ. em tìm không thấy

Mọi settings của 1 plugin đều nằm trong ACP > plugins, bên phải có hình cây viết bấm vô là dc. Còn ko có hình cây viết có nghĩa là plugin đó ko có settings.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×