Video hướng dẫn tùy chỉnh Website WordPress

Bạn đang tìm cách tùy chỉnh Website WordPress. Bạn có thể tham khảo các bài viết trong chuyên mục Tùy biến giao diện WordPress. Tuy nhiên, bạn cũng có thể tìm hiểu chi tiết cách thức cài đặt, tùy biến một trang Web trong Video dưới đây. Video hướng dẫn hết sức chi tiết và được chia sẻ trên Youtube bởi trang web wpsculptor.com.

 

Video trình bày các nội dung chính:

1. Mua một tên miền và thuê dịch vụ lưu trữ Hosting từ Hostgator - Một trong những nhà cung cấp dịch vụ lưu trữ lớn nhất thế giới

2. Cài đặt WordPress

3. Thay đổi giao diện mặc định của WordPress

4. Tạo các trang (Pages) và hướng dẫn cách sử dụng trình soạn thảo bài viết

5. Tìm kiếm các bức ảnh có chất lượng cao và miễn phí

6. Sử dụng một trình sửa chữa ảnh trực tuyến Pixlr để chỉnh sửa hình ảnh bạn sẽ sử dụng trên Website của mình.

7. Cài đặt Plugin tạo một bộ sưu tập ảnh và mẫu trang liên hệ.

8. Sắp xếp các vị trí trình bày trên trang Web.

9. Cách tìm kiếm và sử dụng các biểu tượng 

10. Cách cấu hình WordPress cơ bản.

11. Tìm và sử dụng các ảnh nền miễn phí

Cấu trúc của Video như sau:

+ Từ phút 0:00 đến 0:25 : Lời nói đầu của tác giả

+ Từ 0:26 đến 1:06 : Giới thiệu các nội dung chính trong Video

+ Từ 1:07 đến 3:08 : Giới thiệu về trang Web kết quả sau khi bạn thực hiện các bước trong Video và cấu trúc của trang Web này. Website được tạo ra trong Video gồm 5 trang chính:

  • Home - Trang chủ
  • About this website - Giới thiệu về Website
  • Video - Các video sử dụng trên Website
  • Contact Me - Liên hệ với người quản lý trên Website
  • Gallery - Bộ sưu tập ảnh

1. ĐĂNG KÝ TÊN MIỀN VÀ THUÊ HOSTING TỪ HOSTGATOR

+ Từ 3:09 đến 7:35 : Hướng dẫn bạn đăng ký tên miền và thuê Hosting của Hostgator.

Lưu ý: Do Video được thực hiện từ đầu năm 2013 nên giao diện đăng ký của Hostgator đã thay đổi tại thời điểm này. Bạn có thể tham khảo chi tiết cách đăng ký Hostgator và cách giải quyết các vấn đề gặp phải trong quá trình đăng ký trong bài viết Hướng dẫn đăng ký một Website trên Hostgator.

+ Từ 7:36 đến 8:24 : Hướng dẫn cách đăng nhập vào phần quản lý Hosting sau khi bạn đã đăng ký thành công.

2. SỬ DỤNG QUICK INSTALL ĐỂ CÀI ĐẶT NHANH WORDPRESS

+ Từ 8:25 đến 11:06: Hướng dẫn bạn cài đặt nhanh website WordPress sử dụng ứng dụng Quick Install. Bạn cần lấy thông tin về tên đăng nhập và mật khẩu tại bước này. Giờ bạn đã có một Website WordPress đơn giản. 

+ Từ 11:07 đến 12:23: Giới thiệu qua về cấu trúc trang Web vừa được cài đặt thành công gồm có 2 trang mặc định là Home, Sample Page và một bài viết Hello World được tạo ra bởi WordPress.

+ Từ 12:24 đến 12:50: Hướng dẫn bạn đăng nhập vào trang quản trị WordPress để có thể tùy chỉnh trang Web vừa tạo. Bạn gõ trên thanh địa chỉ của trình duyệt Web nội dung: ten_mien_cua_ban.com/wp-admin, điền tên đăng nhập và mật khẩu mà bạn có được ở bước cài đặt WordPress bằng Quick Install để đăng nhập trang quản trị.

+ Từ 12:51 đến 13:48: Sau khi cài đặt WordPress bằng QuickInstall, QuickInstall sẽ cung cấp cho bạn một mật khẩu rất dài và khó nhớ. Vì vậy, bạn cần thay đổi mật khẩu. Tại trang quản trị, trên thanh công cụ Users, chọn All Users để hiển thị tất cả các tài khoản người dùng trên Website > Chọn người dùng bạn muốn thay đổi mât khẩu, bạn sẽ được chuyển sang trang quản lý hồ sơ của bạn ( Your profile) > Kéo xuống dưới cùng, tại mục New Password, bạn gõ mật khẩu mới vào. Tại ô trống phía dưới, bạn nhập lại mật khẩu một lần nữa để xác nhận lại mật khẩu > Nhấn Update Profile để cập nhật các thay đổi.

3. THAY ĐỔI GIAO DIỆN CỦA WORDPRESS

 + Từ 13:49 đến 15:27 : Bạn nhấn vào mục Appearance > Chọn Themes để vào trang quản lý giao diện trên WordPress. Bạn có thể kích hoạt các giao diện khác đã được cài đặt trên WordPress, thay thế cho giao diện ban đầu của Website bằng cách: tại giao diện bạn chọn, nhấn Activate để chọn giao diện đó. Sau đó, bạn quay lại trang Web để xem sự thay đổi về giao diện Website.

4. TẠO MỚI TRANG VÀ LỰA CHỌN TRANG CHỦ CHO WEBSITE

+ Từ 15:28 đến 20:55 : Nhấn vào công cụ Pages trên menu trái của trang quản trị > Chọn Add New để thêm mới các trang. Bạn có thể tìm hiểu chi tiết trong bài viết Cách tạo và quản lý các trang (Pages) sử dụng công cụ Pages trong WordPress. 

Sau khi tạo mới xong trang với tiêu đề Welcome to the Urban Decay Architecture Mock Website, bạn có thể tới xem nội dung trang đó trên Website. Tuy nhiên, trên thanh Menu mặc định bao gồm các mục Homepage, Sample Page và Welcome to the Urban Decay Architecture Mock Website. Một vấn đề diễn ra là tiêu đề trang mới thêm rất dài chiếm khá nhiều diện tích trên thanh menu ngang và tác giả muốn tạo một đặt bài viết vừa thêm làm trang chủ. Việc bạn cần làm là tạo mới một Menu trong WordPress.

+ Từ 20:56 đến 21:55: Tạo Menu mới bằng cách chọn Appearance > Chọn Menus 

Trong phần Menu Name, nhập tên menu bạn muốn tạo (trong video là Top Navigation), sau đó nhấn Create Menu. Tuy nhiên, menu bạn tạo ra trống không và chưa có một mục nào. Bạn cần thêm các mục vào menu. Trong khu vực Pages, bạn chọn trang cần thêm vào Menu, nhấn Add to Menu để thêm trang đó vào Menu. Cuối cùng chọn Save Menu để lưu lại những thay đổi.

Trong phần này, tác giả chọn thêm mỗi trang Welcome to the Urban Decay Architecture Mock Website vào menu mới. Sau khi lưu thành công, bạn quay lại xem trang Web.

+ Từ 21:56 đến 22:11: bạn quay trở lại trang web và vẫn thấy dòng chữ Welcome to the Urban Decay Architecture Mock Website khá dài chiếm hơn nửa diện tích thanh menu. Giờ bạn cần rút gọn dòng chữ đó trên thanh menu mà không cần thay đổi tiêu đề bài viết đó. Bạn quay trở lại phần Appearance, chọn Menus, thay đổi nhãn menu trong phần Navigation Label thành Home, nhấn Save Menu để lưu lại thay đổi.

+ Từ 22:12 đến 23:11 : Thanh menu chuyển từ tên dài thành Home. 

+ Từ 23:12 đến 24:08 : Bạn muốn đặt trang Welcome to the Urban Decay Architecture Mock Website thành trang chủ, bạn cần chọn công cụ Settings, nhấn Reading > Đánh dấu chọn A static page, chọn trang Welcome to the Urban Decay Architecture Mock Website trong danh sách các trang trong phần Front Page > Nhấn Save changes để lưu lại thay đổi. Giờ, trang chủ của bạn chứa trong Menu Home hiển thị bài viết Welcome to the Urban Decay Architecture Mock Website.

+ Từ 24:09 đến 24:42: Bạn cần xóa bài viết Hello World mặc định trong WordPress. Bạn chọn công cụ All Posts để vào phần quản lý các bài viết. Chọn bài viết Hello World, nhấn Trash để gửi bài viết đó đến thùng rác. Đọc thêm Bài 6.1 - Quản lý, sửa/xóa bài viết sử dụng tính năng All Posts của thanh công cụ Posts WordPress .

+ Từ 24:43 đến 25:16 : Bạn cần xóa trang Sample Page bằng cách vào phần quản lý trang (Pages), chọn trang Sample Page, chọn Trash để gửi trang đó đến thùng rác.

5. TÌM KIẾM CÁC BỨC ẢNH CÓ CHẤT LƯỢNG CAO VÀ MIỄN PHÍ

+ Từ 25:17 đến 31:40 : Hướng dẫn bạn cách tải một ảnh và chọn ảnh đó làm ảnh nền trên Website của bạn bằng cách nhấn Appearance, chọn Background. Trong phần Select Image, bạn nhấn vào Browse, chỉ tới ảnh nền bạn muốn chọn > Nhấn Upload để tải ảnh đó lên Website > Nhấn Save Changes để lưu ảnh đó làm ảnh nền cho Website của bạn.

+ Từ 31:41 đến 36:20 : Hướng dẫn bạn tải ảnh làm ảnh nền cho phần Header.

6. SỬ DỤNG PIXLR ĐỂ CHỈNH SỬA ẢNH TRỰC TUYẾN VÀ ĐẶT ẢNH NỀN CHO HEADER

+ Từ 36:21 đến 44:40: Do ảnh tải về khá lớn trong khi phần Header có kích thước 960 x 250 px. Vì vậy, bạn cần sử dụng Pixlr để cắt ảnh theo kích cỡ đó và thiết kế ảnh đó cho phần Header. Sau khi sửa xong, bạn lưu lại ảnh đó ( trong video, tên của ảnh được sửa là header_original.jpg).

+ Từ  44:40 đến 50:14: Bạn chọn Appearance, nhấn Header. Tại phần Select Image, nhấn Browse, chọn ảnh header_original.jpg > Chọn Upload để tải ảnh. Do ảnh đã được cắt theo kích thước chuẩn, bạn chọn Skip Cropping. Nếu ảnh bạn chưa được cắt theo kích thước 960 x 250, bạn sẽ cần chọn phần ảnh muốn đặt làm ảnh nền cho Header, chọn Crop and Publish.

ẨN LOGO VÀ SLOGAN DẠNG VĂN BẢN

+ Từ 50:15 đến 50:54: Do trên phần Logo Website hiển thị Logo với tiêu đề là Quick Press và câu slogan là Just another WordPress site. Bạn cần ẩn cả hai thành phần này bằng cách chọn Appearance, nhấn Header > trong phần Header Text, bỏ đánh dấu mục Show Header Text with your image > Nhấn Save Changes.

+ Từ 50:55 đến 57:10: Hướng dẫn bạn tạo mới một trang About this website: Learning how to build a website With WordPress. Tuy nhiên, tên này cũng khá dài. Bạn chỉ muốn tên này xuất hiện trên thanh Menu với nội dung About this website. Vì vậy, bạn cần chọn Appearance, nhấn Menus, đánh dấu chọn trang About this website: Learning how to build a website With WordPress, nhấn Add To Menu để thêm trang vào Menu. Tiếp tục đổi tên trong phần Navigation Label thành About this website > nhấn Save Changes.

VÔ HIỆU HÓA TÍNH NĂNG BÌNH LUẬN, TRACKBACK, PINGBACK TRÊN CÁC TRANG ĐÃ CHỌN

 + Từ 50:55 đến 58:00: Trong trang About this website và trang Home này, bạn không muốn mọi người đăng bình luận hay trackback, pingback, bạn có thể vô hiệu hóa chúng bằng cách:

Chọn Screen Options, đánh dấu vào mục Discussion. Khi đó, phía dưới phần soạn thảo trang sẽ xuất hiện 2 mục: Allow Comments, Allow Pingback and Trackback on this page. Bạn bỏ đánh dấu các mục này để vô hiệu hóa phần bình luận. Làm tương tự với trang Home.

VÔ HIỆU HÓA TÍNH NĂNG BÌNH LUẬN, TRACKBACK, PINGBACK TRÊN TẤT CẢ CÁC TRANG

+ Từ 58:01 đến 59:00: Bạn chọn Settings, nhấn Discussion để tới phần cấu hình bình luận trên Website. Sau đó bạn bỏ đánh dấu 2 mục: Allow link notifications from other blog và mục Allow people to post comments on new articles > Nhấn Save Changes.

7. CÀI ĐẶT PLUGIN NEXTGEN GALLERY ĐỂ TẠO BỘ SƯU TẬP ẢNH

+ Từ 59:01 đến 59:46: Bạn nhấn vào công cụ Plugin trên thanh Menu trái, chọn Add New > Trong phần Search, bạn nhập "Nextgen Gallery", nhấn Search Plugins. Khi tìm thấy Plugin đó, nhấn vào Install Now để cài đặt Plugin. Nhấn vào Active Plugin để kích hoạt Plugin đó.

+ Từ 59:47 đến 1:02:00: Tác giả hướng dẫn bạn tải hình ảnh để đưa vào bộ sưu tập ảnh.

+ Từ 1:02:01 đến 1:03:20: Bạn tạo mới bộ sưu tập bằng cách chọn công cụ Gallery ở thanh menu trái (công cụ được tạo ra bởi Plugin Nextgen Gallery), chọn Add Gallery/ Images. Trong phần New Gallery, bạn nhập tên Gallery 1, nhấn Add Gallery để hoàn thành bước tạo mới bộ sưu tập ảnh có tên Gallery 1.

Bạn được chuyển tới phần Upload Image, nhấn Select Files, chọn các hình ảnh > Nhấn vào danh sách trong phần Choose Gallery, chọn Gallery 1 để Nextgen biết bạn muốn chọn các ảnh đó cho bộ sưu tập Gallery 1. Nhấn Upload Images để bắt đầu Upload ảnh.

+ Từ 1:03:21 đến 1:03:40: Bạn đến phần cấu hình của Nextgen Gallery bằng cách chọn công cụ Gallery, chọn Options > Chọn thẻ Gallery. Tại mục Intergrate Slideshow, bạn bỏ đánh dấu ô Show as Slide show. Nhấn Save Changes.

+ Từ 1:03:41 đến 1:04:28: Để hiển thị bộ sưu tập ảnh này, bạn cần thêm mới trang Gallery bằng cách chọn Pages > Add New. Phần Add New Page, bạn nhập tiêu đề trang. Trong phần nội dung, bạn nhấn vào biểu tượng Nextgen trên trình soạn thảo bài viết, chọn Gallery 1 trong danh sách các Gallery, nhấn Insert để thêm mới bộ sưu tập có tên Gallery 1 vào trang này.

+ Từ 1:04:29 đến 1:05:36: Tương tự như các phần trên, để hiển thị trang trên thanh menu ngang, bạn cần vào phần Appearance, chọn Menus, đánh dấu vào trang có tên Gallery, nhấn Add To Menu. Do tên này ngắn nên bạn không cần thay đổi tên này trong phần Navigation Label > Nhấn Save Menu.

CÀI ĐẶT PLUGIN CONTACT FORM 7 ĐỂ TẠO MẪU LIÊN HỆ

+ Từ 1:05:37 đến 1:07:00 : Bạn chọn công cụ Plugins, nhấn Add New. Trong ô Search, bạn nhập vào nội dung "Contact Form 7", nhấn Search Plugin. Khi Plugin "Contact Form 7" hiện ra, bạn nhấn vào Install Now, chọn Activate Plugin để kích hoạt Plugin đó.

Sau khi kích hoạt, bạn sẽ thấy xuất hiện công cụ Contact Form nằm ở thanh menu trái. Nhấn vào đó, bạn sẽ tới trang tùy chỉnh mẫu liên hệ. Bạn cần chép đoạn mã: [contact-form-7 id="24" title="Contact form 1"] để nhúng vào trang Contact Me bạn sẽ tạo ở bước tới. 

+ Từ 1:07:01 đến 1:08:55: Bạn tạo mới một trang bằng cách chọn công cụ Pages, nhấn Add New. Ở phần tiêu đề trang, bạn nhập Contact Me. Trong phần nội dung, bạn dán đoạn mã đã chép ở trên vào, nhấn Publish. Tiếp tục, bạn tới Appearance > Chọn Menus > Chọn trang Contact Me, nhấn Add To Menu để thêm Contact Me vào Menu ngang > Nhấn Save Menu.

Giờ, bạn có thể quay lại Website của mình để kiểm tra tính năng liên hệ vừa được tạo xong.

+ Từ 1:08:56 đến 1:11:15: Bạn nhấn chọn công cụ Pages, nhấn Add New. Nhập tiêu đề Video và trong phần nội dung Video, bạn điền một đoạn văn bản ngắn. Sau đó, tương tự như các lần trước, bạn đưa trang Video lên thanh Menu ngang. Tuy nhiên, trang Video lại chưa có một video nào cả. Bạn cần thực hiện nhúng Video vào Website.

Trong video trình bày cách nhúng một Video trên Youtube vào Website. Bạn tới Youtube, chọn Video bạn muốn nhúng. Nhấn vào Shared, chọn thẻ Embed, chép đoạn mã có dạng : <iframe></iframe>. 

Quay trở lại phần soạn thảo trang Video, bạn chọn sang thẻ Text ( bên cạnh thẻ Visual), dán đoạn mã đó vào. Sau đó, nhấn Update. Quay trở lại trang Web để nhìn kết quả.

+ Từ 1:11:16 đến 1:13:50: Bạn thấy các danh mục trong menu ngang được sắp xếp khá lộn xộn. Từ Home, đến About this Website, Gallery, Contact Me, Video. Bạn muốn sắp xếp lại chúng theo trình tự từ Home, About this website, Video, Contact Me, Gallery. Bạn đến phần Appearance, chọn Menus. Nhấn và giữ chuột phải vào thanh Gallery và kéo thanh đó lên trước thanh Video và nhả chuột. Tiếp tục kéo thanh Video xuống vị trí dưới cùng và thả. Nhấn Save Menu để lưu lại các thay đổi.

 8. BỔ SUNG CÁC TÍNH NĂNG (WIDGETS) ĐƯỢC CUNG CẤP BỞI WORDPRESS VÀO WEBSITE CỦA BẠN

+ Từ 1:13:51 đến 1:18:50: Nhấn chọn Appearance > Widgets. Chọn và giữ chuột trên Widget mà bạn muốn cho vào Website trong phần Available Widgets, kéo chúng sang khu vực bên phải (Trong Video, có 3 khu vực trên Website có thể cho Widget vào, đó là: Main Slidebar, First Frontpage Widget Area, Second Front Page Widget Area) và thả chuột. Ngược lại, bạn muốn xóa một Widget ra khỏi Website của bạn, bạn chọn Widget từ 3 khu vực trên, kéo và thả chúng sang khu vực Available Widgets.

+ Từ 1:18:51 đến 1:27:24: Tác giả cài đặt Plugin Black Studio Tiny MCE giúp bạn có thể nhúng các hình ảnh, video, bộ sưu tập vào vị trí thanh bên Slidebar. 

+ Từ 1:27:25 đến 1:29:30: Thêm ảnh nổi bật (Set Feature Image) cho trang chủ.

9. CÁCH TÌM KIẾM VÀ SỬ DỤNG CÁC BIỂU TƯỢNG

+ Từ 1:29:31 đến hết : Bạn đến trang iconfinder.com để tìm kiếm các biểu tượng. Chèn biểu tượng đó vào thanh Slidebar sử dụng Plugin Studio TinyMCE.

Vậy là bạn đã được hướng dẫn chi tiết cách tạo một Website WordPress từ A đến Z. Cảm ơn Josh Jackson đã chia sẻ đoạn video tuyệt vời này!

Save

Save

PS: Nếu bạn nào muốn thưởng thức các loại hải sản tươi ngon hết ý cùng giá cả phải chăng, được đánh bắt từ vùng biển Cô Tô, Quan Lạn, Vân Đồn - Quảng Ninh, vui lòng liên hệ với mình nhé. Cảm ơn các bạn đã ủng hộ!

 

                                                HẢI SẢN VÂN ĐỒN 399

                             Chuyên bán buôn, bán lẻ hải sản tươi sống, hải sản khô, hải sản 1 nắng

                                   (Ốc móng tay Cô Tô, Sá sùng Quan Lạn, Mực tươi Cô Tô,...)

                         - Cơ sở 1: Số nhà 399, Lý Anh Tông, Thị trấn Cái Rồng, Vân Đồn, Quảng Ninh
                         - Cơ sở 2: Ngõ 184, Hoàng Quốc Việt, Cầu Giấy, Hà Nội
                         - ĐT: 0985.286.522
                         - Website: http://vandon.com.vn/haisan
                         - Email: [email protected]

                  
                  

 


Ngôn ngữ

TÌM KIẾM

Hải sản Vân Đồn