Thiết kế lại trang web WordPress của bạn (Để thêm một liên lạc cá nhân)

Không có nền tảng nào khác trao cho bạn sức mạnh để tùy chỉnh giao diện của trang web của bạn như WordPress. Nó là một trong những lý do tại sao WordPress phổ biến với các nhà xuất bản và nhà phát triển web.


Bạn có thể lấy một chủ đề WP cơ bản (và buồn tẻ), thêm logo, chỉnh sửa một vài dòng mã, thay đổi CSS của bạn và có một trang web chuyên nghiệp (nhưng vẫn cá nhân) ngay lập tức. Nó làm việc dễ dàng và hướng dẫn này sẽ chỉ cho bạn cách thực hiện.

Bạn đã sẵn sàng chưa? Hãy bắt đầu với những điều đầu tiên trước tiên; màu sắc.

Thiết kế bảng màu

Khi phát triển một bảng màu cho trang web WordPress của bạn, có nhiều điều cần xem xét. Hãy nghĩ về nó như sơn nhà của bạn, hoặc cửa hàng đá của bạn. Bạn phải xác định màu sắc sẽ đi trên tường của bạn và màu bạn muốn cửa ra vào.

Cách bạn vẽ ngoại thất và nội thất của bạn sẽ phụ thuộc vào một vài yếu tố hàng đầu là sở thích cá nhân của bạn.

Tô màu trang web WordPress của bạn cũng không khác. Bạn muốn liên kết của bạn màu gì? Nền tảng của bạn, làm thế nào bạn sẽ làm cho nó hấp dẫn nhất và khiến cho đối thủ của bạn há hốc miệng? Những màu sắc nào sẽ bổ sung (hoặc thậm chí trao quyền) cho thông điệp của bạn? Bạn muốn văn bản của bạn như thế nào? Bầu trời giới hạn cho sự lựa chọn màu sắc bạn có thể sử dụng trên trang WP của mình.

Bạn phải xác định tất cả các màu bạn sẽ sử dụng từ khi bắt đầu. Tôi khuyên bạn chỉ nên sử dụng ba màu, nhưng bạn có thể tự do sử dụng nhiều màu như bạn muốn.

Chỉ cần don quá lạm dụng nó hoặc bạn sẽ làm loãng thông điệp tiếp thị của bạn trong tất cả các màu đó. Rốt cuộc, sự dư thừa của bất cứ thứ gì đều độc hại, vì vậy, bất kể màu sắc bạn chọn là gì, nó rất quan trọng để đảm bảo có sự hài hòa.

Nó tốt nhất để sử dụng hầu hết các màu sắc mà phần lớn mọi người sẽ thấy (và hy vọng) yêu thích chúng. Tôi nói về logo và tiêu đề của bạn. Những khu vực này chính xác là nơi bạn cần nhiều màu sắc nhất; phần còn lại của trang web của bạn có thể ít màu sắc hơn nhưng nhiều thông tin hơn.

216 màu Versus 12 màu

Chúng ta đều quen thuộc với mười hai màu cơ bản, nhưng web có đầy đủ các màu sắc và sắc thái khác nhau của chúng. Vì lý do này, việc chọn màu sắc sẽ toát lên sự ấm áp cá nhân trong khi tạo ra một cái nhìn chuyên nghiệp có thể là một nhiệm vụ đầy thách thức.

Mặc dù vậy, bạn rất may mắn vì tôi đã truy cập Internet và tìm thấy các công cụ sau để giúp bạn bắt đầu:

KULER

kuler

Kuler được Adobe thiết kế để giúp các nhà phát triển web tạo ra các bảng màu hàng đầu. Kuler là một công cụ trực tuyến, có nghĩa là bạn có thể mang nó đi khắp nơi và sử dụng nó từ bất cứ đâu, nhưng cũng có một ứng dụng máy tính để bàn để giúp bạn phát triển các bảng màu ngay từ máy tính để bàn của bạn. Ngoài ra, nếu bạn có Adobe ID, bạn có thể lưu các bảng màu của mình chỉ bằng một cú nhấp chuột.

Có nhiều quy tắc màu khác nhau để sử dụng với Kuler bao gồm Đơn sắc, Hợp chất, Bổ sung, Tương tự và Bộ ba trong số các quy tắc khác.

Kiểm tra Kuler.

BIỂU ĐỒ MÀU HTML

Biết màu sắc bạn sẽ sử dụng chỉ là một nửa công việc. Để thực hiện màu sắc của bạn, bạn phải dịch chúng sang mã HTML.

biểu đồ màu html

Đây là nơi Biểu đồ màu HTML xuất hiện. Đây là biểu đồ đầy màu sắc với hơn 200 (216 thực tế) mã màu web. Được trang bị biểu đồ, không có màu dưới ánh mặt trời nên khó thực hiện.

Các mã sẽ hoạt động với HTML, CSS, Adobe PhotoShop và các công cụ xử lý đồ họa khác, vì vậy bạn có toàn quyền tự do chơi với màu sắc của mình nhiều như bạn muốn.

Kiểm tra Bảng màu HTML.

CHUNG

Nếu bạn cần trợ giúp chọn màu, GenoPal là ứng dụng bạn muốn. Nó có một ứng dụng web rất đơn giản mà các bảng màu của Ghim ghim vào cửa sổ trình duyệt của bạn. Khi bạn chọn màu của mình, chúng sẽ xuất hiện trong trình duyệt của bạn dưới dạng các ghi chú dính màu tô màu. ��

bộ phận sinh dục

Với GenoPal, bạn có thể tăng độ sáng và kiểm soát độ bão hòa màu, để bạn có được chính xác sắc thái bạn muốn.

Trên trang web của họ, một ứng dụng di động đang được chuẩn bị. Sau khi được khởi chạy, nó sẽ cho phép bạn mang ứng dụng và phát triển màu sắc trên thiết bị di động của bạn. Thiết kế của họ thật tài tình và thực tế là ứng dụng này thực sự hoạt động là một dấu hiệu rõ ràng cho thấy GenoPal có nghĩa là kinh doanh.

MÀU SẮC

ColorHexa là phiên bản trực tuyến của tấm sơn nghệ sĩ. Trang web này cung cấp cho bạn khả năng trộn màu bằng cách chỉ cần nhập mã màu. Ứng dụng tiên phong của họ là công cụ pha trộn màu sắc nhưng họ cũng có một bộ tạo độ dốc và bộ trừ màu. Đó là thiên tài thuần túy trong công việc ở đây?

màu sắc

Máy xay sinh tố ColorHexa hoạt động như thế nào? Tất cả những gì bạn phải làm là nhập mã màu của bạn được phân tách bằng một + + và ColorHexa thực hiện phần còn lại của công việc. Ví dụ: tôi đã thử:

# ff0000 + # 0000ff + # ff00ff và tôi đã nhận được # aa00aa. Hơn thế nữa, họ cung cấp cho bạn toàn bộ trang thông tin màu (trên màu cuối cùng của bạn, ví dụ # aa00aa). Đây là một công cụ bạn phải tự thử trải nghiệm pha trộn màu sắc hơn bao giờ hết.

Kiểm tra ColorHexa.

MÁY PHÁT ĐIỆN LỚN CSS TUYỆT VỜI

máy tạo độ dốc màu cuối cùng

Đây có lẽ là công cụ tốt nhất khi tạo độ dốc màu. Nó hoàn toàn trực tuyến và giúp bạn tạo các điểm giữa mới và mã CSS tương ứng của chúng. Họ cũng cung cấp Tiện ích bổ sung Chrome và Firefox để cho phép bạn tích hợp ứng dụng vào trình duyệt của mình để truy cập nhanh hơn và dễ dàng hơn.

Có một khu vực xem trước nơi bạn nhìn thấy độ dốc của mình, vì vậy tất cả những gì bạn phải làm là tạo độ dốc khi bạn thấy phù hợp và sao chép dán mã CSS được tạo. Nó thực sự dễ dàng và chúng có nhiều màu sắc hơn bạn sẽ sử dụng.

Kiểm tra Trình tạo Gradient CSS Cuối cùng.

Chọn phông chữ

Bây giờ tôi đã chỉ cho bạn cách chọn và pha trộn màu sắc như Picasso, hãy để trò chơi xung quanh với các phông chữ.

Màu sắc và thiết kế web của bạn sẽ thu hút mọi người, nhưng nó nói lên những từ của bạn, tức là các trang và bài đăng của bạn sẽ khiến mọi người chú ý.

Chúng tôi đang bận rộn tạo ra những câu chuyện hay nhất của chúng tôi mọi lúc, vì vậy hầu hết chúng ta quên rằng phông chữ cũng quan trọng. Nhưng phông chữ bạn chọn ảnh hưởng đến cách mọi người tương tác với trang web của bạn. Với các phông chữ phù hợp, đối tượng mục tiêu của bạn sẽ muốn bám xung quanh và cuối cùng nhấp qua các trang khác của bạn, đó chính xác là những gì bạn muốn. Hôn ước.

Có một triệu và một phông chữ ngoài kia, nhưng thật không may, người dùng sẽ chỉ nhìn thấy các phông chữ được cài đặt trên máy của họ. Nếu phông chữ bạn sử dụng không được cài đặt trên máy của họ, họ sẽ thấy một thay thế gần đúng (hoặc một phông chữ hoàn toàn khác), mà won đã có hiệu ứng giống như bạn muốn.

Chơi với phông chữ giống như chơi với lửa. Đôi khi nó có thể thắp sáng một trận đấu trên một trang web, một đoạn văn bản đẹp. Những lần khác, nó có thể thiêu rụi toàn bộ ngôi nhà. – Lorelle của cameraontheroad.com.

Bạn có thể kiểm soát phông chữ của mình (và tạo hiệu ứng bạn muốn) bằng biểu định kiểu của bạn. Trong chủ đề của bạn, biểu định kiểu thường là style.css tập tin. Bạn có thể sử dụng tệp này để kiểm soát màu của phông chữ, loại phông chữ / phông chữ, cỡ chữ và các khía cạnh khác của phông chữ bạn đã chọn.

Sau đây là một ví dụ tốt:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; cỡ chữ: 0,8em; màu đen;}

Đoạn mã trên sẽ đặt kích thước phông chữ trong menu của bạn thành 0,8em và đặt màu thành màu đen. Nó cũng sẽ đặt phông chữ thành Arial, nhưng nếu người dùng không có Arial trên máy của họ, Helvetica sẽ đảm nhận. Nếu họ không có Helvetica hoặc Arial, Verdana, Sans-serif hoặc Times New Roman sẽ tiếp quản.

Bằng cách kiểm soát các phông chữ, bạn có thể tạo ra một giao diện phù hợp hơn.

Tuy nhiên, để giải quyết vấn đề không thống nhất về phông chữ một lần và mãi mãi, bạn có thể sử dụng phông chữ nhúng. Bằng cách sử dụng phông chữ được nhúng (hoặc bên ngoài), người dùng không cần phải có phông chữ trên máy của họ.

Ngoài ra, nó là công việc dễ dàng.

Tất cả bạn phải làm là mở của bạn style.css và đặt đoạn mã sau lên hàng đầu.

@ font-face {font-family: Museo300; src: url ("phông chữ / museo300-thường.ttf") định dạng: ('truetype'); trọng lượng phông chữ: bình thường;}

LƯU Ý: Bạn phải xác định tên và vị trí của phông chữ của bạn. Trong ví dụ ở trên, Museo Museo300, đây là phông chữ được lưu trong thư mục có tên là phông chữ.

Để sử dụng phông chữ trên trang web của bạn, ví dụ, bạn có thể viết:

cơ thể {font-family: Museo300;}

Bạn có thể sử dụng phông chữ nhúng cho bất kỳ yếu tố nào trên trang web của bạn. Ví dụ…

#menu {font-family: Museo300;}

Rock sẽ thiết lập Museo300 trong menu của bạn.

Phương pháp trên có nghĩa là bạn phải tải xuống phông chữ và tải lên cùng một máy chủ của bạn, điều này nếu bạn hỏi tôi khá tẻ nhạt.

Tuy nhiên, yBạn không cần tải xuống bất kỳ phông chữ bên ngoài nào bạn muốn sử dụng.

Bạn chỉ có thể liên kết đến các phông chữ từ phần đầu (header.php) của mình như vậy:

Làm thế nào và ở đâu bạn thêm dòng trên? Bạn cần mở Bảng quản trị WordPress -> Giao diện -> Trình chỉnh sửa -> tiêu đề.php

Nếu bạn không muốn hoặc có thể chỉnh sửa tập tin header.php của bạn, chỉ cần nhập các phông chữ bằng cách nhập dòng sau vào style.css:

@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);

Ví dụ trên sẽ cho phép bạn sử dụng Bên kia cầu vồng phông chữ từ Google bất cứ nơi nào trên trang web của bạn. Ví dụ: nếu bạn muốn sử dụng Over The Rainbow trên toàn bộ trang web của mình, bạn có thể sử dụng mã này:

body {font-family: "Over The Rainbow";}

Google cung cấp hơn 600 gia đình phông chữ miễn phí, nên chơi đi!

Cập nhật (07/12/13): Nếu bạn muốn thêm Google Fonts vào trang web WordPress của mình một cách dễ dàng, bạn có thể sử dụng Plugin Google typography. Ngoài ra, bạn có thể tìm hiểu thêm về phông chữ của Google và cách triển khai chúng trong phần Cải thiện kiểu chữ trang web WordPress của bạn với phông chữ Google của Tom Ewer.

Thêm tài nguyên về chơi với phông chữ

Plugin WordPress để thêm phông chữ

Và đối với những người không muốn đào sâu vào mã, bạn luôn có thể cài đặt một plugin WordPress để thực hiện một số công việc nặng nhọc cho bạn. Dưới đây là một số plugin phông chữ miễn phí phổ biến hơn từ WordPress.com:

Bạn vui chứ? Tiếp tục nào…

 Định dạng ngày và giờ

Bạn đã từng đến một trang web WordPress hiển thị ngày hoặc thời gian với một giai điệu thực sự tốt đẹp khiến bạn cảm thấy như một người mới hoàn toàn mà trang web của bạn quan tâm? Chủ sở hữu của các trang web này chỉ chơi với một một dòng mã và bây giờ bạn có thể nhận được đủ số ngày của họ. Haha.

Tin tốt, bạn có thể chỉnh sửa dòng mã này và làm ngạc nhiên độc giả của bạn là tốt.

Trong bạn Bảng điều khiển WP, hướng đến Xuất hiện, và sau đó để Biên tập viên như hình dưới đây:

ngày định dạng

Khi đó, bạn sẽ có thể thấy một danh sách các tệp .php của bạn ở phía bên phải:

Bài đăng đơn

Nhấp vào bài đăng đơn (single.php) và khi nó được mở, hãy mở thanh tìm kiếm bằng cách nhấn Ctrl + F. Trong thanh tìm kiếm xuất hiện, gõ:

thời gian

Bạn sẽ ngay lập tức phát hiện ra một dòng có thể trông giống như:

Bây giờ, khu vực bạn muốn chỉnh sửa là (‘F Yát).

Cho phép tôi xác thịt phần này để cung cấp cho bạn một cái gì đó fleshier để cắn vào.

The F Fult trong (‘F Y,) là viết tắt của Họ và tên của tháng và những người nổi tiếng là đại diện cho Năm có 4 chữ số. Do đó, nếu bạn sử dụng (‘F Y,), ngày của bạn sẽ như sau:

Tháng 9 năm 2013

Nếu bạn ném một dấu phẩy giữa F và Y, bạn sẽ có một cái gì đó như:

Tháng 9 năm 2013

Nếu bạn muốn thêm ngày và các yếu tố khác, bạn có thể sử dụng các ký tự sau:

l = Tên đầy đủ của ngày (chữ thường L)

F = tháng

j = Ngày trong tháng (ngày)

Y = Năm có 4 chữ số

y = Năm có 2 chữ số

Nhiều ký tự có thể được tìm thấy trong bảng dưới đây:

định dạng bảng ngày

Và đây, một vài ví dụ:

định dạng ví dụ ngày

Luôn nhớ chỉ chỉnh sửa các ký tự trong ngoặc (‘F Y,) và, lưu ý, don lồng xóa dấu ngoặc đơn. Hãy sử dụng nhiều ký tự như bạn muốn để đạt được hiệu quả bạn muốn và nhớ lưu mọi thứ khi hoàn thành.

Còn gì nữa, bạn có thể thoát khỏi ngày tháng bằng cách xóa đi

Như tôi đã làm trên blog của tôi cách đây không lâu. Bây giờ, tất cả những gì tôi nhận được là Được đăng bởi Fred trong và vì vậy thể loại đào blah blah. Không có ngày nào cả.

Bạn có tiếp nhiên liệu cho phần tiếp theo không? Bạn tốt hơn là.

Didn không tìm thấy hàm_time?

Đó là ok, bởi vì rất nhiều chủ đề bây giờ đang sử dụng hàm_date () thay vì hàm_time (), đây thực sự là một cách thực hành tốt hơn. Nếu chủ đề của bạn đang sử dụng chức năng_date (), bạn sẽ giành được bất kỳ chỉnh sửa nào vì bạn chỉ cần thay đổi cách hiển thị dữ liệu trong bảng điều khiển của mình trong Cài đặt của chế độ-> General General.

Sử dụng hình ảnh

Đây có lẽ là phần dễ nhất (và ngắn nhất) của hướng dẫn này. Nhưng nếu bạn thực sự mới với WordPress, việc thêm hình ảnh có thể là một thách thức.

WordPress cho phép bạn thêm hình ảnh thông qua tiện ích tải lên hoặc (nút Thêm phương tiện) khi tạo một bài đăng hoặc trang mới. Tất cả những gì bạn cần làm là đặt con trỏ của bạn vào nơi bạn muốn hình ảnh nằm trong bài đăng hoặc trang của bạn, sau đó nhấp vào Thêm Add Media Media.

thêm phương tiện truyền thông

Khi tiện ích tải lên mở ra, bạn có thể thêm các chi tiết khác như chú thích, kích thước, liên kết và căn chỉnh của mình.

tiện ích tải lên

Khu vực này được tìm thấy ở phía bên phải của tiện ích tải lên.

Để tìm hiểu thêm về cách thêm hình ảnh, vui lòng kiểm tra các tài nguyên sau:

Và nếu bạn không chắc chắn nơi tìm thấy một số hình ảnh miễn phí tuyệt vời, hãy kiểm tra bài đăng chúng tôi đã viết các trang bìa tài nguyên hình ảnh tốt nhất cho WordPress.

Xem? Tôi đã nói với bạn nó sẽ là ngắn nhất

Thêm một Favicon

Trước khi chúng tôi hoàn toàn quên đi hình ảnh, hãy để chúng tôi tạo và thêm một favicon vào trang web WordPress của bạn. Hình đại diện (hoặc biểu tượng yêu thích) là biểu tượng được sử dụng để đánh dấu trang web.

Một favicon sẽ giúp người đọc xác định trang web của bạn một cách trực quan.

Nói chung, favicon là tệp đồ họa vuông 16 X 16 pixel với phần mở rộng .ico. Phần mở rộng là viết tắt của biểu tượng.

Cách tạo Favicon

Bạn có thể tạo favicon trực tuyến hoặc sử dụng các chương trình chỉnh sửa hình ảnh như GIMP hoặc bất kỳ chương trình nào khác cho phép bạn lưu các tệp .ico. Hầu hết các dịch vụ trực tuyến đều miễn phí.

Mặc dù hình ảnh thường rất nhỏ (16 x 16 pixel), favicon nên thể hiện toàn bộ blog của bạn. Hình ảnh hoặc văn bản bạn sử dụng để tạo favicon của bạn sẽ đại diện cho doanh nghiệp trực tuyến của bạn.

Nếu bạn đang sử dụng trình chỉnh sửa hình ảnh:

  • Cắt hoặc thêm không gian phù hợp để đảm bảo hình ảnh của bạn là hình vuông
  • Thay đổi kích thước hình ảnh thành 16 X 16 pixel và
  • Lưu hình ảnh dưới dạng favicon.ico

Các dịch vụ trực tuyến mà bạn có thể sử dụng để tạo favicon bao gồm (nhưng không giới hạn):

Sau khi bạn tạo favicon, họ sẽ cho phép bạn tải nó xuống máy tính của bạn, vì vậy đừng lo lắng.

Cách cài đặt Favicon của bạn trong WordPress

Nếu có một favicon khác trong thư mục chính của chủ đề, bạn sẽ cần xóa nó bằng ứng dụng khách FTP hoặc bất kỳ phương thức nào có sẵn cho bạn. Khách hàng FTP được khuyến nghị vì chúng dễ sử dụng và bạn có thể nhanh chóng tìm thấy bất kỳ tệp nào bạn đang tìm kiếm.

Đối với hướng dẫn này, tôi đã sử dụng faviconer.com để tạo một favicon cho blog của mình và Filezilla để xóa các favicon hiện có.

Với tệp favicon.ico trong tay, hãy tải lên cùng vào thư mục chính chủ đề của bạn. Đây là thư mục lưu trữ chủ đề hiện tại của bạn.

Sau đó tải lên một bản sao khác của favicon của bạn vào thư mục gốc (thường là public_html) hoặc thư mục chính nơi trang web của bạn được lưu trữ, do đó bạn có thể thấy favicon của mình khi bạn nhập yoursite.com/favicon.ico. Điều này sẽ tự động thêm favicon của bạn vào nguồn cấp dữ liệu của bạn.

Khi bạn tải lên xong, đã đến lúc để favicon.ico hoạt động. Đây là những gì bạn nên làm:

Thêm Favicon của bạn bằng cách sử dụng plugin

Cách tốt nhất để thêm favicon của bạn là sử dụng plugin. Tôi khuyên bạn nên sử dụng các ứng dụngTất cả trong một FaviconPlugin cho việc sử dụng nâng cao hơn cho cách tiếp cận rất đơn giản, bạn có thể sử dụngFavicon đơn giản nhấtPlugin plugin không có tùy chọn back-end mà bạn chỉ cần tải lên một tệp có tên favicon.ico ở đúng vị trí trên máy chủ của bạn.

tất cả trong một favicon

Thêm favicon thủ công vào mẫu của bạn

Một số người có thể thích (mặc dù đó không phải là cách tốt nhất) để thêm favicon của họ theo cách thủ công vào mẫu của họ, để thực hiện việc này theo các bước sau:

  • Đăng nhập vào của bạn bảng điều khiển
  • Hướng đến Xuất hiện
  • Sau đó Biên tập viên (Biên tập chủ đề)
  • Tìm và mở header.php (tiêu đề) tập tin

Thêm dòng này vào tệp tiêu đề của bạn (tốt nhất là ở đầu bạn nhìn thấy khác thẻ:

Lưu lại sau khi hoàn thành. 

Làm mới trình duyệt của bạn để xem những thay đổi mới của bạn.

Tại thời điểm này, bạn sẽ có thể thay đổi màu sắc của mình, chọn phông chữ tốt hơn, định dạng ngày và giờ, sử dụng hình ảnh và thêm hình đại diện.

Phần kết luận

Có rất nhiều điều để thảo luận về việc thiết kế lại trang web WordPress của bạn đến nỗi nó sẽ là một sự bất đồng (với bạn) để cố gắng bao quát mọi thứ trong một bài đăng.

Để có lợi nhất cho bạn, tốt nhất nên chia hướng dẫn thành nhiều phần (đây là phần 1). Chúng tôi sẽ chia sẻ nhiều thủ thuật thiết kế lại hơn khi ngày tới, vì vậy hãy cảnh giác. Mục đích của các hướng dẫn này là giúp bạn tạo trang web WordPress tốt nhất từ ​​trước đến nay và khiến bạn cảm thấy hạnh phúc hơn vì bạn đã tự mình làm tất cả.

Nếu bạn muốn chia sẻ ý kiến ​​của mình hoặc thêm điều gì đó vào cuộc thảo luận, xin vui lòng để lại nhận xét của bạn trong phần bình luận bên dưới!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map