Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Cài đặt giao diện mobile cho wordpress – Mobilize

Cài đặt giao diện mobile cho wordpress – Mobilize

Thứ Năm, 17/07/2014 by Hoàng Quách

Nội dung

  • 1 Cài đặt
  • 2 Theme Options Panel
  • 3 Nhận dạng Mobilize theme trên điện thoại
  • 4 Shortcodes
    • 4.1 Layouts
    • 4.2 Shortcodes
  • 5 Cài đặt Page & Post
  • 6 Sử dụng featured movie trong bài viết
  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

8-cong-cu-tao-website-cho-mobile-mobilize-mippin

Mobilize wordpress được thiết kế cho giao diện mobile, là template phổ biến hiện nay. Mobilize theme được xây dựng dựa trên thư viện jQuery Mobile nổi tiếng, trong theme có rất nhiều options để tùy chỉnh như icons, slider, featured images, movies…Mobilize tương thích với hầu hết trình duyệt mobile từ cấu hình thấp đến cao đây là điểm tuyệt vời.

Cài đặt

Đầu tiên bạn Tải Mobilize wordpress theme ở file đính kèm bên dưới bài viết.

Giải nén file .zip vừa tải về. Cài đặt wordpress theme như bình thường, có thể lựa chọn 2 cách sau đây để cài đặt theme:

  1. Upload via WordPress
    1. access your wp-admin, Truy cập Appearence > Themes > Install Themes > Upload
    2. chọn mobilize.zip từ ổ đĩa
    3. activate
    4. done!
  2. Upload via FTP
    1. Giải nén mobilize.zip
    2. Vào ftp, truy cập vào thư mục / wp-content / themes và copy folder ‘mobilize’ trong thư mục đã giải nén.
    3. Tại giao diện wp-admin, chọn Appearence > Themes
    4. activate Mobilize theme
    5. done!

Chi tiết demo, cài dữ liệu mẫu và cấu hình mobilize bạn xem video này nhé.

[youtube_sc url=”https://www.youtube.com/watch?v=S6SMIzULjfo#t=150″]

Theme Options Panel

Bạn sẽ rất ngạc nhiên khi truy cập vào theme options Mobilize vì giao diện khá chuyên nghiệp. Nó cho phép bạn chỉnh sửa nhiều thành phần có trên theme.

mobilize options
mobilize options2

Nhận dạng Mobilize theme trên điện thoại

Ở phần trên bạn đã học được cách cài đặt và chỉnh sửa Mobilize, bước tiếp theo là kích hoạt Theme này khi vào trình duyệt trên mobile. Hiện tại có 2 plugin để switch sang theme khác phù hợp với các thiết bị mobile mà mình biết đó là: Mobile Device Detection by 51Degrees và Any Mobile Theme Switcher trong bài này mình sử dụng Mobile Device Detection by 51Degrees làm ví dụ.

  1. Cài đặt plugin 51Degrees.mobi Mobile Device Detector trên giao diện chính (lưu ý không phải trên mobile).
  2. Chọn vào menu “51Degrees.mobi” trong phần quản trị wordpress.
  3. Tạo rule mới bằng cách nhấn vào nút Create new rule. Check vào Mobile
  4. Mục “Then change theme to” chọn “[Redirect to url]” đến website có chạy thêm Mobilize Hoặc chọn một trong danh sách các theme đã cài đặt của website wordpress.
  5. textbox bên cạnh, nhập url của website chạy Mobilize.
  6. Hoàn tất!

Xem hình minh họa:

mobilize-plugin

51degreesmobi có thể làm được nhiều hơn thế nữa, đó là tính năng switch theme cơ bản được sử dụng miễn phí, tuy nhiên nếu muốn custom nhiều hơn bạn phải trả phí cho nó.

Shortcodes

Layouts

Shortcode NameExample
[one_half]
[one_half]<p><strong>This is one-half of a row.</strong><br />Proin mattis vehicula……….</p>[/one_half]
[one_half_last]
[one_half_last]<p><strong>This is one-half of a row (last).</strong><br />Proin mattis …..</p>[/one_half_last]
[one_third]
[one_third]<p><strong> This is one-third of a row. </strong><br />Proin mattis vehicula …..</p>[/one_third]
[one_third_last]
[one_third_last]<p><strong>This is one-third of a row(last).</strong><br />Proin mattis ….</p>[/one_third_last]
[two_third]
[two_third]<p><strong>This is two-third of a row.</strong><br />Proin mattis vehicula ………</p>[/two_third]
[two_third_last]
[two_third_last]<p><strong>This is two-third last of a row.</strong><br />Proin mattis …</p>[/two_third_last]

Shortcodes

Shortcode reference được tích hợp vào editor, để thuận tiện cho việc sử dụng.
shortcode-mobilize

Cài đặt Page & Post

Thiết lập page-image cho header?
Truy cập Page editor page, chọn “Set featured image” ->chọn new header image như hình dưới:

phead

Sử dụng những options dưới đây:

1. check “Hide title from page” nếu bạn không muốn hiển thị tiêu đề trang
2. check “Sticky footer” nếu bạn muốn cố định (fixed) footer (luôn ở vị trí bottom của page, kể cả nội dung không có thanh cuộn)
3. check “Modal window” để thiết lập modal window -(không có header và footer)

psett

Sử dụng featured movie trong bài viết

Tại giao diện nhập bài viết, cuộn tới metabox “Post – Featured Movie”. Lựa chọn vimeo hoặc youtube , nhập video ID. Lúc này featured Image không được sử dụng, chỉ một trong hai nếu bạn sử dụng Featured Movie thì thôi Featured Image và ngược lại. Do vậy nếu muốn hoàn lại featured image thì xóa trường video id đi.

post

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Thay đổi logo đăng nhập với wordpress
  2. Sử dụng flexslider gallery trong WordPress với Woothemes
  3. Tạo nút media upload trong wordpress
  4. Redirect sau khi đăng nhập wordpress
  5. Hướng dẫn việt hóa wordpress
  6. Cách lấy dữ liệu bài viết trong wordpress
  7. Gửi mail trong wordpress bằng SMTP server riêng
  8. Tính năng template redirect trong wordpress
  9. Chèn trình soạn thảo bài viết WYSIWYG MCE trong wordpress.
  10. Hướng dẫn tạo phân trang wordpress

Chuyên mục: Wordpress Tìm kiếm: mobile theme

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.