Hướng dẫn tạo website game trên Wordpress.

Hướng dẫn tạo website game trên WordPress,đầu tiên bạn hãy lấy link từ website khác.

Bước 1: Chọn và vào game để chơi.

Bước 2: Nhấn tổ hợp phím Ctrl + U hoặc Click chuột phải vào màn hình rồi chọn View page source.

Bước 3: Nhấn tổ hợp Ctrl + F

Với game flash, bạn điền ‘Swf‘ vào ô tìm kiếm và nhấn Enter. Định dạng đường dẫn thường là http(s)://tên miền/…/têngame.swf.
Với game html5, bạn điền ‘html‘ vào ô tìm kiếm và Enter. Định dạng đường dẫn như sau: http(s)://tên miền/…/têngame.html.
Bước 4: Copy đường dẫn và lưu lại.

Mình ví dụ lấy link game “Ếch chạy đua” trên Game 24h: http://game.24h.com.vn/game-the-thao/ech-chay-dua-c125g2689b29.html thì đường dẫn game của nó như sau: http://static.game.24h.com.vn/upload/2015/2015-3/game/2015-07-23/Game_EchChayDua.swf.

OKAY. Vậy là đã xong phần tìm nguồn game bằng cách lấy link từ website khác. Công việc tiếp theo sẽ là tìm cách để hiển thị những game này vào website của mình.

Không thì bạn có thể vào 2 đường link sau để lấy nguồn game hoàn toàn miễn phí:

1.myarcadetheme

2.fungames24

3.Emanueleferonato

Ok,giờ ta đến phần,quan trong nhất.

Tùy chỉnh giao diện để nhúng game

Vậy sau khi tìm được link game rồi thì phải làm gì để hiện thị chúng ra màn hình? Câu trả lời cho vấn để này là sử dụng thẻ html có tên Iframe. Cấu trức của thẻ Iframe như sau

[css light=”false”]<iframe src=”Game_link” width=” height=” ></iframe>[/css]

Nói đơn giản tác dụng của Iframe dùng để nhúng website khác vào website của mình với khung(Chiều dài + Chiều rộng) tùy chỉnh.

Ví dụ: Đây là link game full screen.  Với việc sử dụng Iframe, mình có thể thu nhỏ xuống 1 kích cỡ nhất định mà vẫn chơi được bình thường.

tạo web game online bằng wordpress

Nhưng một vấn đề nữa lại phát sinh. Chẳng lẽ mỗi khi viết 1 game thì bạn lại viết cả một dòng code dài ngoằng như trên sao. Điều này trông rất thiếu thẩm mỹ và tốn thời gian. Có một cách đơn giản hơn, đó chính là sử dụng custom field.  Bạn chỉ cần nhập link vào và game sẽ hiển thị ngay tại vị trí mà bạn muốn.

Custom Field

Để upload một game lên website thì trong phần edit post chắc chắn bạn phải tạo thêm một custom field để đặt đường link game này vào rồi. Đây là một custom field của mình sử dụng plugin Advanced Custom Fields.

Đây là bài viết của Thạch Phạm về cách sử dụng Advanced Custom Fields rất chi tiết. Bạn nên xem bài viết này trước khi tiếp tục nhé.  Link bài viết tại đây. Và mình nghĩ sau khi đọc xong chắc chắn bạn sẽ biết lý do tại sao phải sử dụng Custom Field trong việc nhúng game này.

Sau đây là các bước để tạo Custome Fields.

Bước 1: Nhận vào Add New để tạo ra nhóm trường mới (Field Group)

Bước 2: Tạo điền tên Group và tạo 1 field. Ở đây, có 3 mục bạn cần chú ý là Field Label, Field Name và Field Type.

Field Label: Tên hiển khi trong phần Edit post/page/custom type.

Field Name: Đây là tên chúng ta sẽ dùng để làm việc với source code.

Field Type: Ở đây bạn chọn là text bởi link game của chúng ta ở dạng text.

tạo web game online bằng wordpress

Bước 3: Nhấn Publish để tạo.

Sau đó, bạn vào tạo một bài viết mới sẽ xuất hiện một field như hình sau:

Đây chính là nơi bạn enter link game của mình nào đó.

Đưa dữ liệu từ Custom Field vào giao diện

Thông thường file giao diện chung của mỗi bài post có tên là Single.php. Bạn vào phần Appearance/ Editor , sau đó tìm đến file Single.php.

Tại đây bạn chọn một nơi để đặt Game của mình để hiển thị. Bạn nên đặt  vào sau tiêu đề để người dùng có thể nhìn thấy ngay khi vào game đó. Sau đó dán đoạn code sau vào nơi mình muốn.

[css]<iframe src=”<?php echo get_post_meta($post->ID, “tên_trường(Field Name)”, true); ?>” width=”640″ height=”574″></iframe> [/css]

  • Width/Height: Đây là thuộc tính để tùy chỉnh chiều dài và rộng của khung Iframe
  • Src: Đây là nơi chứa đường link game.

Mình sẽ nói kỹ hơn về hàm get_post_meta(). Đây là một hàm lấy giá trị của field nào đó trong bài viết ra hiển thị bên ngoài. Cụ thể trong bài viết này là field chúng ta vừa tạo bên trên.

Cú pháp cụ thể như sau:

[css] get_post_meta( $post, $meta_key, $single ) [/css]

  • $post: Là ID của bài viết cần lấy custom field.
  • $meta_key: tên key của field cần lấy trong bài viết. Mặc định sẽ lấy toàn bộ field có trong post.
  • $single: Tuỳ chọn hiển thị một giá trị hay một mảng giá trị. Mặc định là false (hiển thị mảng).

Sau khi hoàn thành, nhấn Save Changes để lưu thay đổi.

Bây giờ, bạn hãy tạo một bài viết và đặt đường dẫn game vào đó. Publish và xem thành quả của mình nào.

 

1 phần bài viết lấy từ website:cùng lập trình.

About The Author

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Lâm Văn Định Recent comment authors
  Subscribe  
newest oldest most voted
Notify of