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

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Cài đặt giao diện mobile cho wordpress – Mobilize

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 thành lập dựa theo 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 đa số trình duyệt mobile từ cấu hình thấp đến cao nà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ũng đều có thể chọn lựa 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 bỡ ngỡ 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 phần tử có trên theme.

mobilize options
mobilize options2

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

Ở phần bê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 thích hợp với những 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 phương pháp 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 bản kê 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ũng có thể thực hiện được không ít 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 cần trả phí cho nó.

Shortcodes

Layouts

Shortcode Name Example
[one_half]
[one_half]

This is one-half of a row.
Proin mattis vehicula……….

[/one_half]

[one_half_last]
[one_half_last]

This is one-half of a row (last).
Proin mattis …..

[/one_half_last]

[one_third]
[one_third]

This is one-third of a row.
Proin mattis vehicula …..

[/one_third]

[one_third_last]
[one_third_last]

This is one-third of a row(last).
Proin mattis ….

[/one_third_last]

[two_third]
[two_third]

This is two-third of a row.
Proin mattis vehicula ………

[/two_third]

[two_third_last]
[two_third_last]

This is two-third last of a row.
Proin mattis …

[/two_third_last]

Shortcodes

Shortcode reference được tích hợp vào editor, để thuận lợi 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 thích hiển thị tiêu đề trang
2. check “Sticky footer” nếu bạn muốn cố định (fixed) footer (luôn ở địa thế bottom của page, cho dù là 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 chưa đượ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 trả featured image thì xóa trường video id đi.

post

Để thu đượ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ể thu được sự trợ giúp trên Twitter và Facebook

Bài viết Cài đặt giao diện mobile cho wordpress – Mobilize được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang