Tạo mã ngắn cho chủ đề WordPress của chúng tôi

Kể từ khi chúng tôi bắt đầu với dự án này, chúng tôi luôn muốn nó có nhãn riêng của chúng tôi và đó là lý do tại sao mẫu thứ hai chúng tôi sử dụng FromLinux, nó được tạo ra bởi chúng tôi 100%.

Sau đó, các phiên bản khác theo sau và mặc dù chúng tôi có thể mua hoặc thuê một số dịch vụ web nhất định để tạo ra các thiết kế của chúng tôi như thiết kế của EstudioDWeb.comhoặc mua các mẫu đã được tạo trong ThemeForest.net, chúng tôi luôn muốn có cái của riêng mình, thích ứng với nhu cầu của chúng tôi và dừng lại DesarrolloWeb.com có thể giúp đỡ 😀

Dù sao, tôi đam mê Thiết kế và Phát triển Web, và tôi đã làm việc với chủ đề mới cho FromLinux và tôi sẽ cho bạn xem một số Ảnh chụp màn hình về cách nó trông như thế nào.

Ý tưởng không phải là vượt ra khỏi những gì chúng ta đã thích nghi, vì vậy nhiều yếu tố vẫn giữ nguyên hoặc theo cách tương tự. Tôi bắt đầu với trang chủ

screenshot-dl

Và đây là những gì các bài báo sẽ trông như thế này:

screenshot-dl-post

Như bạn có thể thấy, nó phù hợp với thước đo của chúng tôi và chúng tôi đã đưa vào Mã ngắn để xây dựng các bài báo.

Đó là lý do tại sao tôi muốn chia sẻ với bạn cách tạo một trong số chúng (thông tin một) trong trường hợp bạn muốn đưa chúng vào các chủ đề của mình WordPress. Ý tôi là, một cái gì đó như thế này:

Đây sẽ là ShortCode ví dụ

Tôi không phải là một chuyên gia về lập trình với CMS này, vì vậy tôi sẽ không cố gắng giải thích tại sao và nó hoạt động như thế nào theo cách này, tôi sẽ chỉ cho bạn cách thực hiện, định kỳ.

Vì vậy, chúng tôi sử dụng «con dao quân đội Thụy Sĩ» của WordPress, Ý tôi là tệp function.php mà chúng ta thường tìm thấy trong hầu hết các chủ đề.

Brackets_Function

Ví dụ về Function.php với Mã ngắn của DesdeLinux

Những gì chúng tôi sẽ làm trong tệp này là thêm cấu trúc của Mã ngắn của chúng tôi và tất nhiên, nhãn hiển thị nó. Vì vậy, hay thực hiện ngay bây giơ.

Bên trong Function.php

Bên trong tệp function.php của chúng ta, những gì chúng ta sẽ đặt sẽ là cấu trúc HTML của Mã ngắn, nhưng không chỉ đơn giản là đặt các thẻ HTML như vậy. Chúng tôi sẽ có một cái gì đó như thế này:

// Hộp thông tin hàm thông tin ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ content; $ return. = ' '; return $ trở lại; } // Mã ngắn add_shortcode ('thông tin', 'hộp thông tin');

Từ đây chúng tôi làm rõ một vài điều. Đầu tiên, khi chúng tôi sử dụng hai thanh, chúng tôi nhận xét ra dòng, do đó // Thông tin nó chỉ là một bình luận.

Tên của hàm, trong trường hợp này Hộp thông tin Nó có thể được thay đổi thành bất cứ điều gì chúng ta muốn, nhưng nó phải khớp với tên chúng ta sử dụng ở dòng cuối cùng.

Trong mỗi $ trở lại chúng tôi trả về thẻ HTML là gì và chúng tôi phải nhớ rằng sau thẻ đầu tiên, chúng tôi phải thêm dấu chấm vào trước dấu bằng và dòng kết thúc bằng dấu dấu chấm phẩy

Ví dụ:

$ return. = $ content;

Biến $ nội dung đó là nơi mà nội dung mà chúng ta đặt trong Mã ngắn đi theo mặc định, nó sẽ trả về giá trị null nếu chúng ta không đặt bất kỳ thứ gì.

Bây giờ, tên của Mã ngắn là những gì chúng tôi đặt với:

add_shortcode( 'info', 'infobox' );

Nơi bạn có thể thay đổi Thông tin cho những gì chúng tôi muốn. Bây giờ, để làm cho nó giống như ví dụ, chúng ta phải đặt:

[ info ]Este será el ShortCode de ejemplo[ /info ]

Mặc dù tất nhiên, không có khoảng trắng, mà tôi đặt vì rõ ràng Mã ngắn sẽ được kích hoạt.

Kiểu mã ngắn

Nếu bạn nhìn vào dòng trên, không có mã PHP và các biến, thì Mã ngắn trong HTML thuần túy sẽ giống như sau:

<div class="alert-info"></div>

Vì vậy, chúng ta chỉ phải áp dụng kiểu CSS.

.alert.alert-info {background: # d9edf7 url (info.png) không lặp lại 7px 50%; bán kính đường viền: 4px; border: 1px solid # bce8f1; màu: # 3a87ad; font-size: 14px; lề: 15px 15px; padding: 15px 15px 15px 50px text-align: left}

Và thế là xong .. Tôi xin nhắc lại, tôi không phải là một lập trình viên hay bất cứ thứ gì tương tự, và lời giải thích mà tôi đưa ra là cách tôi hiểu rằng Mã ngắn hoạt động 😛


Nội dung bài viết tuân thủ các nguyên tắc của chúng tôi về đạo đức biên tập. Để báo lỗi, hãy nhấp vào đây.

9 bình luận, để lại của bạn

Để lại bình luận của bạn

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu bằng *

*

*

  1. Chịu trách nhiệm về dữ liệu: Miguel Ángel Gatón
  2. Mục đích của dữ liệu: Kiểm soát SPAM, quản lý bình luận.
  3. Hợp pháp: Sự đồng ý của bạn
  4. Truyền thông dữ liệu: Dữ liệu sẽ không được thông báo cho các bên thứ ba trừ khi có nghĩa vụ pháp lý.
  5. Lưu trữ dữ liệu: Cơ sở dữ liệu do Occentus Networks (EU) lưu trữ
  6. Quyền: Bất cứ lúc nào bạn có thể giới hạn, khôi phục và xóa thông tin của mình.

  1.   còn sót lại72 dijo

    Tôi thích nó trông như thế nào, tôi xin chúc mừng bạn.

    1.    elav dijo

      Cảm ơn bạn, bạn còn một chặng đường dài phía trước nhưng cảm ơn bạn.

  2.   Rogers dijo

    Rất tốt!! Tôi rất thích một chủ đề như vậy trong WP của tôi.
    Tôi chúc mừng bạn!

    1.    elav dijo

      Em chưa đặt thì bán cho anh HAHAHAHAHA .. Đùa thôi 🙂

  3.   Manuel E. dijo

    Tuyệt vời, cảm ơn vì đã chia sẻ.
    Loại tài nguyên này rất cần trên web, giải thích mọi thứ rõ ràng.

    Chúc mừng!

  4.   eliotime3000 dijo

    Thiết kế đẹp. Hãy xem nếu trang web của tôi, bạn có thể cung cấp cho tôi mẫu đó để tùy chỉnh nó.

  5.   raven291286 dijo

    điều đó có thể được thực hiện trong blogger?

  6.   javier dijo

    Chà, không có gì, tôi đã đặt nó như vậy và nó không hiệu quả với tôi, nó có thể là gì? : /

    Tôi đặt [thông tin] thông tin [/ thông tin]

    và trong bài viết wordpress của tôi nó chỉ xuất hiện: thông tin, dấu ngoặc biến mất, tôi nghĩ có gì đó không ổn: /

    1.    Jhonny Silva dijo

      Có thể trong mẫu của bạn, Mã ngắn không được định nghĩa trong function.php như trong trường hợp của tôi, những giá trị này được thêm vào một tệp có tên là shortcodes.php trong chủ đề của tôi