Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development
Code

Cách tạo trang khởi chạy lan truyền với WordPress

by
Length:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Các trang khởi chạy lan truyền đang xuất hiện ở khắp mọi nơi với lý do chính đáng. Chúng hiệu quả để biến thời gian trực tuyến ít ỏi của một doanh nghiệp (chưa có website hoặc sản phẩm) thành cơ hội tiếp thi hiệu quả nhất. Giải thích nhỏ là cần thiết để tạo ra nhiều tiếng vang, đặc biệt là khi có một động cơ đằng sau nó. Tận dụng sức mạnh của sự bí ẩn! Ngoài ra, mọi người thích nội dung miễn phí.


Giới thiệu

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách code một trang khởi chạy nhanh chóng bằng WordPress. Hướng dẫn này dựa trên code được sử dụng cho một chủ đề mà chúng tôi đã phát triển tháng trước cho WordPress có tên là Launch Effect. Bạn có thể thấy chủ đề đang hoạt động ở đây: Khởi chạy Hiệu ứng Demo.

Theme Launch Effect cho phép người sở hữu trang web tùy chỉnh trang giới thiệu doanh nghiệp, sản phẩm hoặc sự kiện của họ và thúc giục khách truy cập đăng ký bằng email của họ để kiếm được nhận một số khuyến khích giá trị(lời mời dùng bản beta, thẻ quà tặng, phiếu giảm giá, v.v.). Khi gửi đi, trang tạo liên kết tham chiếu duy nhất mà người sở hữu website có thể dùng để theo dõi các liên kết tham chiếu hoạt động tích cực nhất của họ để biết ai sẽ nhận thưởng. Dữ liệu đăng ký, truy cập và chuyển đổi đều được lưu trữ trong cơ sở dữ liệu của người sở hữu trang web và được xuất sang trang thống kê riêng tư.

Bằng việc dùng phiên bản "thu gọn" của theme Launch Effect, hướng dẫn này sẽ chỉ cho bạn cách thực hiện chức năng tập họp cùng email và tạo ra URL duy nhất, cũng như thiết lập trang thống kê trong phần quản trị của WordPress.

Kỹ năng khôn khéo, đây là một hướng dẫn cho người mới bắt đầu PHP, nó giúp bạn giao tiếp với một cơ sở dữ liệu và làm điều bạn muốn với dữ liệu. Chúng tôi sẽ sử dụng các chức năng chỉ có ở WordPress mà bạn sẽ cần làm cho mọi thứ hoạt động trong WordPress, cụ thể, mặc dù kiến ​​thức cơ bản này chắc chắn có thể áp dụng khi không dùng chung với WordPress. Tôi hy vọng bài hướng dẫn này sẽ là một dự án hữu ích mức đô cơ bản dành cho coder phát triển font-end đang tìm kiếm nâng cao kiến thức phát triển ngoài HTML/CSS.


Các file nguồn

Các tệp nguồn của hướng dẫn thực sự là một theme độc lập của WordPress. Để cài đặt:

  1. Nâng cấp bản cài đặt WordPress lên phiên bản mới nhất.
  2. Tải về và kích hoạt theme.
  3. Đi đến Settings > Permalinks và chọn tùy chọn thứ ba.

Chủ đề sẽ trông giống như các trong các ảnh và hoạt động ngay tức thì. Dữ liệu thống kê có sẵn thông qua trình đơn Launch Stats trong phần quản trị của WordPress.

Mặc dù không cần thiết cho hướng dẫn này, nhưng bạn nên có một số quyền truy xuất vào cơ sở dữ liệu của mình để bạn có thể thoải mái làm việc và có nhiều khả năng hơn để khắc phục các sự cố trong tương lai.


Bạn sẽ học cách làm thế nào để

  • Tạo bảng cho dữ liệu của bạn trong cùng một cơ sở dữ liệu chứa cài đặt WordPress của bạn
  • Xác thực và gửi biểu mẫu trên trang WordPress mượt mà với Ajax.
  • Truy cập nhật ký và chuyển đổi bằng liên kết giới thiệu duy nhất được tạo bởi trang web của bạn
  • Xuất dữ liệu biểu mẫu tới trang để xem

Bước 1 Bảng

Tệp được tham chiếu:

  • functions.php
  • functions/le-tables.php

Trong thư mục theme bạn sẽ thấy rằng file functions.php "yêu cầu" 3 file bổ sung nằm trong thư mục functions. Một trong số chúng, "le-tables.php", đảm nhận việc thực sự tạo ra một bảng mới trong cơ sở dữ liệu. Nếu bạn đã kích hoạt theme của hướng dẫn, thì bảng mới của bạn đã được tạo ra trong database. Bởi vì việc tạo bảng được thực hiện đơn giản khi bạn XEM bất kỳ trang nào trong trang WordPress của bạn (việc xem một trang WordPress gọi functions.php và file này gọi le-tables.php).

Bên dưới đây, tôi sẽ giải thích các phần khác nhau của code trong le-tables.php dùng để tạo ra bảng trong database. Bạn có thể tạo ra một số bảng bổ sung với phương pháp này. Tôi thật sự khuyên bạn nên kiểm tra mục này trong WordPress Codex để có toàn bộ thông tin: WordPress Codex: Creating Tables with Plugins

functions/le-tables.php

Kết nối với cơ sở dữ liệu với biến toàn cục $wpdb của WordPress. Điều này khởi tạo một class đã được thiết lập bởi WordPress để giao tiếp với cơ sở dữ liệu WordPress. Luôn kết nối theo cách này khi bạn đang làm việc từ bên trong WordPress.

Bảng của chúng tôi sẽ được đặt tên "wp_launcheffect" và sẽ dược tham chiếu từ biến $stats_table xuyên suốt theme.

Kiểm tra xem bảng có tồn tại chưa trước khi tạo nó.

Biến $sql này xác định cấu trúc bảng. Chúng tôi đang tạo các cột sau: id, thời gian, email, code, referred_by, Visits, conversions và ip.

Bạn thực sự sẽ sử dụng hàm dbDelta của WordPress này để thực hiện truy vấn SQL. Hàm này không được đề cập trong hướng dẫn này nhưng về cơ bản nó phụ trách việc đảm bảo các bản cập nhật diễn ra trơn tru nếu bạn đã xây dựng một plugin, ví dụ. Lý tưởng nhất là nó phải so sánh cấu trúc bảng hiện tại với cấu trúc bảng được cập nhật và thêm hoặc sửa đổi khi cần thiết.

Tại sao không tạo một vài biến để gửi dữ liệu thử nghiệm cho bảng mới?

Sau khi tạo bảng, chèn dữ liệu thử nghiệm vào bảng. Chạy các biến thông qua hàm $wpdb->escape có thể giúp ngăn chặn các sự cố về bảo mật (nhưng rõ ràng dữ liệu kiểm tra không có nguy hiểm).

Lần nữa chúng ta sử dụng lớp $wpdb của WordPress để thực hiện xử lý thực tế cho cơ sở dữ liệu. $wpdb->query là hàm bao quát nhất trong tất cả các hàm tích hợp dùng xử lý cơ sở dữ liệu WordPress. Nó cho phép bạn thực hiện bất kỳ truy vấn SQL nào trên cơ sở dữ liệu WordPress, trên cả những bảng hoặc bảng do WordPress tạo ra, chẳng hạn như bảng bạn vừa tạo. Tuy nhiên, có những bảng khác dành cho các mục đích cụ thể hơn, chẳng hạn như $wpdb->get_results dùng để lấy một kết quả từ cơ sở dữ liệu dưới dạng một mảng gồm các hàng.


Bước 2 Biểu mẫu

Tệp được tham chiếu:

  • header.php
  • index.php
  • post.php
  • js/init.js
  • functions/le-functions.php

Biểu mẫu của chúng tôi chỉ có một dữ liệu nhập vào vào từ người dùng — địa chỉ email đăng ký. Khi gửi, biểu mẫu bị ẩn và một container xuất hiện cùng với thông báo thành công và liên kết giới thiệu duy nhất được theme tạo ra. Liên kết tham chiếu duy nhất chỉ đơn giản là 5 ký tự ngẫu nhiên được gắn kèm vào cuối URL cơ sở của website của bạn.

Chức năng của biểu mẫu này chính xác là điều gì chúng tôi sử dụng để tác động theme Launch Effect. Hãy đi sâu vào các file này!

header.php

Trong tệp này, vui lòng chỉ chủ ý dòng siêu quan trọng bên dưới dùng để ngăn trang hiện ra trạng thái 404 (hiển thị trong Firebug) khi ai đó truy cập qua liên kết tham chiếu duy nhất.

index.php

Đây là trang front của website của bạn — tất cả những điều khách truy cập nhìn thấy và tương tác đều nằm trong trang này. Tệp này chứa biểu mẫu đơn giản với một container chứa thông điệp thành công và một div báo lỗi để hiển thị các thông điệp lỗi bất kỳ. Biểu mẫu phải có ID nhưng phần action nên để trống. jQuery sẽ đảm trách phần gửi đi và xác định biểu mẫu thông qua ID của nó.

Tạo ra một session (phiên) để chúng ta có thể lưu trữ thông tin bên trong các biến session trên các trang. Trong trường hợp này, chúng tôi sẽ lưu trữ code "referred by". Có nghĩa là nếu khách truy cập đến trang web của bạn thông qua liên kết giới thiệu (một liên kết có mã duy nhất ở cuối cùng), thông tin đó sẽ được ghi lại và chuyển đến cơ sở dữ liệu.

Nếu khách truy cập được một người nào đó giới thiệu và đi đến trang thông qua liên kết giới thiệu duy nhất, 5 ký tự cuối cùng của URL (mã số) được lưu trữ trong biến số session này. (Vui lòng tham khảo phần le-functions.php để được giải thích.)

Nếu một người truy cập được ai đó giới thiệu, chức này này sẽ ghi lại dưới dạng lượt truy cập mỗi khi có ai đó truy cập trang qua liên kết giới thiệu duy nhất đó. (Vui lòng tham khảo phần le-functions.php để được giải thích.)

Chúng tôi sẽ lưu URL cơ sở trong phiên này để hàm Ajax của chúng tôi có thể lấy và sử dụng nó để xây dựng một liên kết giới thiệu phù hợp duy nhất. Điều này giúp chúng tôi không phải đặt một URL cố định trong javascript.

Biểu mẫu đăng ký trước Container này biến mất sau khi khách truy cập gửi đi địa chỉ email của họ. Phần nhập dữ liệu ẩn có chứa mã 5 ký tự ngẫu nhiên, duy nhất mà từ đó sẽ được liên kết với email của khách truy cập này. Nếu email không hợp lệ, thông báo đó sẽ xuất hiện trong thẻ div dùng hiển thị lỗi.

Sau khi đăng ký Nếu họ là một đăng ký mới, vùng chứa này xuất hiện sau khi khách truy cập gửi địa chỉ email của họ. Mã duy nhất được ngẫu nhiên tạo ra gồm 5 ký tự sẽ được ghép nối với URL cơ sở mà chúng tôi đã lưu trong span.dirname và xuất ra dữ liệu successcode làm liên kết giới thiệu duy nhất.

Khách truy cập cũ Nếu họ là khách truy cập cũ, container này xuất hiện sau khi khách truy cập gửi địa chỉ email của họ. Container này chứa các khoảng trống để javascript có thể dính dữ liệu cụ thể được lấy từ cơ sở dữ liệu về khách truy cập cũ.

post.php

Tệp này hoạt động song song với javascript trong js/init.js để đăng dữ liệu của biểu mẫu. Hướng dẫn siêu hữu ích này giúp hoàn thiện cho các chức năng mà chúng tôi đã sửa đổi cho nhu cầu của chúng tôi: Jensbits.com: jQuery Ajax and jQuery Post Form Submit Examples with PHP.

Vì tệp này không phải là một bài đăng hay một trang, WordPress thực sự không biết nó tồn tại. Do đó, chúng ta phải đưa nó trở lại vòng lặp vừa đủ để thông báo với cơ sở dữ liệu WordPress thông qua sử dụng cách file sau đây:

Tiếp tục session hiện tại, nơi mà chúng ta đang lưu trữ code "referred by"...

Biến số cho code "referred by" của chúng ta.

Thiết lập các biến số chúng ta sẽ sử dụng để lưu trữ dữ liệu từ biểu mẫu của chúng tôi.

Kiểm tra xem một email đã được gửi chưa, và sau đó liệu email đó vượt qua trình xác thực email được tích hợp sẵn của PHP hay không.

Nếu vượt qua, hãy đặt biến $email_check thành hợp lệ. Chúng ta sẽ cần xét biến đặt thành hợp lệ để javascript của biết rằng nó có thể gửi biểu mẫu.

Kiểm tra xem khách truy cập có phải là người dùng cũ không (Vui lòng tham khảo phần le-functions.php để đọc giải thích.)

Nếu khách truy cập là khách truy cập cũ, hãy đánh dấu biến $reuser là true và lấy số liệu thống kê cho khách truy cập đó từ cơ sở dữ liệu bằng hàm getDetail. (Vui lòng tham khảo phần le-functions.php để được giải thích.)

Nếu khách truy cập là một đăng ký mới, hãy đánh dấu $reuser là false và chèn dữ liệu của biểu mẫu vào cơ sở dữ liệu bằng cách sử dụng hàm postData. (Vui lòng tham khảo phần le-functions.php để được giải thích.)

Lưu dữ liệu email_check, từng phần dữ liệu của biểu mẫu và dữ liệu khách truy cập cũ (nếu có thể) dưới dạng mảng trong chuỗi có định dạng JSON

Xuất phản hồi có dạng chuỗi JSON để sử dụng bằng file javascript. Nếu bạn đang sử dụng FireFox có cài đặt Firebug, bạn có thể thấy phản hồi trong bảng điều khiển nếu bạn mở rộng mục POST.

js/init.js

Chúng tôi đang sử dụng jQuery để thực sự gửi dữ liệu của biểu mẫu. Lần nữa, hãy xem hướng dẫn tuyệt vời này, nói về các điều cơ bản của chức năng này: Jensbits.com: Jensbits.com: jQuery Ajax and jQuery Post Form Submit Examples with PHP.

Khi người dùng nhấn nút gửi trong biểu mẫu #form...

Mã hóa tất cả dữ liệu trong #form thành một chuỗi truy vấn tiêu chuẩn với phương thức serialize của jQuery.

Đây là hàm cho phép chúng ta gửi dữ liệu đi mà không cần tải lại trang:

Nếu địa chỉ email không hợp lệ: Chèn một thông báo lỗi vào thẻ div trống #error. Chú ý cách data.email_check chứa thông tin hợp lệ/không hợp lệ được gửi từ post.php. Tương tự, data.code, data.returncode, data.clicks, data.conversions etc sẽ có thể truy xuất từ đây.

Nếu là khách truy cập cũ: Ẩn biểu mẫu đăng ký trước đó và mờ dần trong container khách truy cập cũ.

Định dạng liên kết giới thiệu duy nhất có gắn URL cơ sở mà chúng ta lưu trong thẻ span đó ở file index.php vào mã có 5 ký tự (data.returncode).

Dán thông tin về khách truy cập cũ mà chúng tôi đã lấy từ cơ sở dữ liệu vào các span sau. Theo cách đó, khách truy cập cũ có thể xem có bao nhiêu người đã click và đăng ký với liên kết của họ cho đến thời điểm này.

Xuất liên kết tham chiếu duy nhất ra trang.

Nếu là người đăng ký MỚI: Ẩn biểu mẫu đăng ký trước và làm mờ dần trong container báo thành công.

Định dạng liên kết giới thiệu duy nhất gắn URL cơ sở mà chúng tôi đã lưu trữ trong khoảng đó trong index.php vào mã gồm 5 ký tự (data.code).

Xuất liên kết tham chiếu duy nhất lên trang.

functions/le-functions.php

Tệp này định nghĩa tất cả các hàm PHP được sử dụng trong suốt theme của hướng dẫn ở cùng một vị trí. Tôi sẽ giải thích từng file ở đây.

Trình tạo mã ngẫu nhiên: Chúng tôi tạo mã 5 ký tự ngẫu nhiên với hàm này. Khá đơn giản ...

Lấy mã "Referred by". Nó lấy URL hiện tại và xét làm giá trị của biến số $url. Ta dùng hàm parse_url của PHP để lấy phần đường dẫn của URL, sau đó ta dùng hàm substr để lấy 5 ký tự sau cùng của phần URL đó. Nếu 5 ký tự sau cùng chứa dấu gạch chéo hoặc rỗng, thì lượt truy cập đó sẽ chuyển hướng (không kèm code liên kết). Nếu không, thì mã "referred by" chính là 5 ký tự đó.

Truy vấn: Điều này chỉ toàn cục hóa $wpdb để chúng ta có thể truy xuất vào tất cả các hàm cơ sở dữ liệu của WordPress và tạo một cách viết tắt dễ dàng để xác định truy vấn SQL ($query) và loại hàm ($type). Đối với các biểu mẫu của chúng tôi, $type sẽ là query, get_results, prepare, hoặc get_var. Xem tài liệu Codex này để tìm hiểu về tất cả các hàm cơ sở dữ liệu có sẵn trong class $wpdb: WordPress Codex: WordPress Codex: WPDB Class Reference.

Ghi nhận lượt truy cập qua liên kết giới thiệu: Nếu khách truy cập được ai đó giới thiệu, chức năng này sẽ ghi nhật ký lượt truy cập mỗi khi có ai đó truy cập trang qua liên kết giới thiệu duy nhất đó. Cột dữ liệu lượt truy cập tăng thêm 1, cột referred_by bằng với mã $referredBy trích ra từ URL.

Chèn thêm dữ liệu: Nửa phần đầu của hàm này đảm nhận viêc thêm địa chỉ email mới và mã số vào cơ sở dữ liệu, cùng với thời gian. Hàm này cũng xét lượt truy cập (visits) và chuyển đổi (conversions) thành 0. Khi có ai ghé thăm website thông qua liên kết giới thiệu duy nhất này, những cột này sẽ tăng giá trị. Nếu đăng ký mới là kết quả của một liên kết giới thiệu từ ai đó, $update2 nhận nhiệm vụi gia tăng cột conversion lên 1 cho người đó (cũng logic này áp dụng logVisits dùng cho conversions thay vì visits).

Đếm số lượng (count): Chúng ta dùng hàm này theo vài cách: trong post.php để kiểm tra xem người truy cập có phải là người truy cập cũ không, ta kiểm tra liệu địa chỉ email được gửi đi qua biểu mẫu có phù hợp với email nào trong database không (ví dụ: $entry = email, $value = $_POST['email']). Nếu thế, thì lượt đếm của những tình huống này sẽ lớn hơn 0, và người truy cập sẽ là người truy cập cũ. Ta cũng dùng nó trong index.php cho hàm codeCheck (xem bên dưới) để triểm tra liệu mã số tạo ra bởi hàm randomString() đã được dùng hay chưa (không chắc nhưng kiểm tra luôn an toàn).

Láy dữ liệu: hàm này chỉ đơn giản là lấy tất cả mọi thứ từ bảng của chúng tôi. Kiểu hàm get_results lưu trữ các kết quả trong một mảng.

Lấy dữ liệu theo giá trị: hàm này lấy mọi thứ từ bảng dữ liệu miễn là trung khớp với một tham số nhất định. Chúng tôi sử dụng điều này ở một vài chỗ: trong post.php, nếu khách truy cập là khách truy cập cũ, chúng ta trả về tất cả dữ liệu mà địa chỉ email đã gửi đi có giá trị bằng địa chỉ email đã có trong cơ sở dữ liệu. Hàm này trả về dữ liệu lượt truy cập và chuyển đổi cho khách truy cập đó. Chúng tôi cũng sử dụng nó trong trang quản trị Stats khởi chạy để xem dữ liệu cụ thể cho một khách truy cập.


Bước 3 Số liệu thống kê

Tệp được tham chiếu:

  • functions/le-stats.php

Như bạn đã phát hiện được điều gì đáng ngờ, trang thống kê được nằm trong như một mục menu cấp cao nhất trong trang quản trị WordPress. Chúng tôi sẽ đưa dữ liệu của chúng tôi vào một bảng trên trang này, nơi bạn có thể sâu sát từng cá nhân.

Cần phải xác định lại biến này cho bảng của chúng tôi ở đây một lần nữa.

Nếu URL chứa chuỗi truy vấn "view", chúng tôi thực sự sẽ xem xét trang chi tiết của khách truy cập cụ thể (là trang hiển thị kết quả của liên kết tiếp thị của một người với các liên kết đã đăng kỳ gần đây của họ, trái ngược với tất cả số liệu thống kê cùng một lúc. Khách truy cập được phân loại theo mã số gồm 5 ký tự của họ, do đó chuỗi truy vấn sẽ trông giống như "? view=XXXXX" ở cuối URL.

Đặt biến biến số $view bằng giá trị của chuỗi truy vấn.

Truy vấn bảng wp_launcheffect cho các mục trong đó, ở đây cột "referred_by" bằng với $view và lưu trong biến $results. Về cơ bản, cho chúng ta xem kết quả những người đã đăng ký qua liên kết giới thiệt duy nhất này. (Vui lòng tham khảo phần le-functions.php để đọc giải thích về hàm.)

Nếu không có bất kỳ kết quả nào, hãy nói như vậy.

Nếu URL không chứa bất kỳ chuỗi truy vấn nào, chỉ cần hiển thị trang thống kê chính. Lấy tất cả dữ liệu từ bảng wp_launcheffect và lưu nó trong biến $result. Hiển thị nội dung của mảng $results bằng cách sử dụng vòng lặp foreach.


Cảm ơn!

Tôi hy vọng điều này hữu ích và mong muốn được nghe ý kiến ​​của bạn!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.