Hướng dẫn how do i find my css file in wordpress? - làm cách nào để tìm tệp css của tôi trong wordpress?

Ngày 17 tháng 1 năm 2014

Một chủ đề được mua ngoài thị trường không bao giờ có thể là 100% những gì bạn dự định trông như thế nào. Luôn có những điều nhỏ mà bạn muốn thay đổi.

Travis đã hỏi tôi một câu hỏi về việc tìm ra nơi để chỉnh sửa các tập tin CSS chủ đề WordPress và tôi nghĩ tôi chỉ chia sẻ nó với bạn.

Nếu bạn đã mua một chủ đề WordPress và muốn thay đổi cách trang web trông ở một số lĩnh vực, bài đăng này là dành cho bạn.

Điều gì kiểm soát một trang web trông như thế nào

Các bảng kiểu xếp tầng (thường được gọi là CSS hoặc bảng kiểu) là một tệp cho biết các trình duyệt của chúng tôi như thế nào trang web sẽ trông như thế nào.(more commonly known as CSS, or stylesheets) is a file that tells our browsers how the website should look like.

Khi bạn truy cập một trang web, trình duyệt của bạn sẽ tìm nạp tệp CSS này, cùng với các tài liệu quan trọng khác và hiển thị cho bạn.

Có trong các tệp CSS là nội dung mã cho biết trình duyệt của bạn cách kết xuất (nói cách khác, hiển thị) trang web. Một ví dụ về câu lệnh CSS là

/ * Điều này cho biết trình duyệt của chúng tôi rằng nó sẽ để lại khoảng cách 18px sau mỗi đoạn */ p {margin-bottom: 18px; }

Có rất nhiều điều trong CSS mà đoạn mã nhỏ ở trên và nó không còn nữa cho bài đăng này. Nếu bạn hoàn toàn mới với CSS, tôi sẽ đề xuất ít nhất là kiểm tra phần CSS của Học viện mã trước khi cố gắng thay đổi bất kỳ tệp CSS nào trên chủ đề WordPress của bạn.

Tệp CSS này nằm ở đâu

Tìm tệp CSS này có thể hơi cồng kềnh và nó phụ thuộc vào việc tác giả chủ đề có quyết định đặt các tệp CSS trong một thư mục khác hay không (cá nhân tôi làm điều đó).

Bạn có thể không chắc chắn liệu các tệp CSS có ở vị trí mặc định của chúng hay không, vì vậy hãy thử các phương thức sau.

Lưu ý nghiêm túc: Bất kể bạn đã sử dụng phương pháp nào để chỉnh sửa các tệp CSS của mình, hãy luôn lưu bản sao lưu trước khi bạn thực hiện bất kỳ thay đổi nào! Nó sẽ là một thảm họa lớn nếu bạn phá vỡ trang web của bạn một cách tình cờ! Bạn có thể sẽ muốn điều đó xảy ra :) No matter which method you used to edit your CSS files, always save a backup copy before you make any changes! Its going to be a big disaster if you broke your site by accident! You probably wouldn’t want that to happen :)

Phương pháp 1

Đi theo ngoại hình> Trình chỉnh sửa và nhấp vào Style.css.

Bạn có thể chỉnh sửa các tệp trực tiếp từ cửa sổ này và nhấn Lưu khi bạn hoàn thành. Hãy nhớ xóa bộ nhớ cache của bạn nếu bạn sử dụng bất kỳ plugin CDN hoặc bộ nhớ đệm nào. (Không chắc chắn? Kiểm tra các plugin của bạn trong WordPress và xem bạn đã kích hoạt một plugin với từ bộ đệm.

Phương pháp 2

Nếu bạn đã thấy rất ít dòng mã, như hình ảnh bên dưới, bạn sẽ gặp may mắn. Tác giả chủ đề đã chọn đặt tập tin ở một nơi khác.

Hướng dẫn how do i find my css file in wordpress? - làm cách nào để tìm tệp css của tôi trong wordpress?

Đối với phương pháp này, bạn sẽ cần có quyền truy cập vào dịch vụ lưu trữ miền của mình (ví dụ như Dreamhost, Hostgater và Bluehost).

Đăng nhập vào dịch vụ lưu trữ miền của bạn và chọn trình quản lý tệp thông qua CPanel. Chọn tùy chọn cuối cùng và chọn gốc tài liệu cho trang web của bạn.

Hướng dẫn how do i find my css file in wordpress? - làm cách nào để tìm tệp css của tôi trong wordpress?

Truy cập WP-Content> Chủ đề> Tên chủ đề của bạn và cố gắng tìm một thư mục chứa các tệp CSS. Chúng thường được đặt tên là các kiểu hoặc kiểu CSS.YOUR THEME NAME and try to finder a folder that houses the css files. They are usually named CSS stylesheets or styles.

Sau đó, bạn có thể chọn tải xuống và chỉnh sửa với chương trình chỉnh sửa văn bản trên máy tính của bạn.

Sau khi chỉnh sửa, hãy đến cùng một thư mục bạn tìm thấy các tệp CSS và nhấn tải lên.

Kết thúc

Đó là hai phương pháp tìm và chỉnh sửa các tệp CSS chủ đề của bạn. Họ chắc chắn không mã hóa các thực tiễn tốt nhất và chỉnh sửa chúng theo cách này thường được tạo ra.

Nhưng này, bạn không phải lo lắng về những thứ thực hành tốt nhất nếu bạn không phát triển các chủ đề.

Nếu bạn cảm thấy muốn tìm hiểu về những thứ mã này, tôi có một cái gì đó rất đặc biệt sắp diễn ra trong vài tuần tới. Tham gia danh sách gửi thư của tôi dưới đây và nhận thông tin đầu tiên về nó.

Nếu bạn thích bài viết này, xin vui lòng hỗ trợ tôi bằng cách chia sẻ bài viết này Twitter hoặc mua cho tôi một loại cà phê. Nếu bạn phát hiện ra một lỗi đánh máy, tôi sẽ đánh giá cao nếu bạn có thể sửa nó trên GitHub. Cảm ơn bạn!

Trên các gói đủ điều kiện, bạn có thể thêm CSS để tùy chỉnh chủ đề trang web của bạn. Chủ đề CSS ban đầu có thể được tìm thấy bằng cách sử dụng các công cụ kiểm tra web của trình duyệt của bạn.

Mục lục

CSS là gì?

CSS là viết tắt của các bảng phong cách xếp tầng. Nó được sử dụng để xác định màu sắc, phông chữ, đệm và các kiểu mặc định khác của một chủ đề trang web. Bạn có thể bấm vào đây để tìm hiểu thêm.

Bảng nội dung ↑

Trước khi bạn bắt đầu

Trình chỉnh sửa khối cung cấp rất nhiều chức năng để thay đổi màu nền của các khối khác nhau, kích thước phông chữ và khoảng cách đường. Kiểm tra để đảm bảo tùy chọn tùy chỉnh được tích hợp vào trình chỉnh sửa khối.

Bảng nội dung ↑

Khái niệm cơ bản của Thanh tra Web

Thanh tra web là gì?

Thanh tra web được xây dựng thành tất cả các trình duyệt hiện đại. Thanh tra web cho phép bạn xem các CS chính xác được sử dụng để tạo kiểu cho các yếu tố HTML khác nhau.

Ba bước cơ bản này sẽ hoạt động trong hầu hết các trình duyệt hiện tại để mở Thanh tra web. Nếu bạn sử dụng Safari hoặc Microsoft Edge, bạn có thể cần kích hoạt tính năng trước khi bạn có thể sử dụng nó.

Để khởi chạy thanh tra web:
  1. Nhấp chuột phải vào phần tử trang web (như văn bản hoặc hình ảnh)
  2. Chọn tùy chọn của KIỂM TRA phần tử ”
  3. Tìm một bảng điều khiển ở phía dưới hoặc bên của màn hình

Bảng điều khiển sẽ hiển thị HTML cho phần tử bạn đã nhấp cũng như tất cả các CSS áp dụng cho nó. Bạn có thể nhấp vào các phần tử HTML khác nhau trong bảng điều khiển và sau đó nhìn vào CSS bên phải để tìm ra CSS nào có thể được sao chép.

Trong Safari:Safari:

  1. Chuyển đến Tùy chọn và nhấp vào Nâng cao.
  2. Kiểm tra Hiển thị hộp kiểm thanh menu phát triển menu.Show Develop menu in menu bar checkbox.

Trong Microsoft Edge:Microsoft Edge:

  1. Nhập about:flags vào thanh địa chỉ cạnh của bạn.
  2. Chọn hộp để bật chế độ xem và kiểm tra phần tử.Enable View mode and Inspect Element.

Thanh tra web được bật theo mặc định trong Google Chrome.

Để thêm mã được sao chép, hãy truy cập trang web của tôi → Ngoại hình → Tùy chỉnh → CSS bổ sung để thực hiện các tùy chỉnh thiết kế trên CSS.

Dưới đây là một số hướng dẫn video cho thấy cách kiểm tra web hoạt động cho từng trình duyệt chính:

Bảng nội dung ↑

Trình duyệt Chrome

Để biết thêm thông tin, hãy kiểm tra hướng dẫn Chrome Devtools.

Bảng nội dung ↑

Firefox

Để biết thêm thông tin, hãy kiểm tra hướng dẫn trình soạn thảo kiểu Firefox.

Bảng nội dung ↑

Cuộc đi săn

Để biết thêm thông tin, hãy kiểm tra Hướng dẫn Công cụ Phát triển Safari.

Tôi có thể tìm các lớp CSS ở đâu trong WordPress?

Trong WordPress, bạn có thể dễ dàng tạo kiểu cho menu của mình bằng cách thêm các lớp CSS vào từng mục và sử dụng nó ...
Chuyển đến Quản trị viên> Ngoại hình> Menu ..
Nhấp vào tùy chọn màn hình (trên cùng bên phải của màn hình).
Kiểm tra các tùy chọn các lớp CSS trong bảng tính menu nâng cao của chương trình.
Thêm các lớp CSS của bạn vào phần tử ..

WordPress được lưu trữ CSS được lưu trữ ở đâu?

Để truy cập vào tùy chỉnh, hãy nhấp vào xuất hiện trên mạng trong bảng điều khiển WordPress và chọn Tùy chỉnh.Tab CSS bổ sung của CSS ở gần phía dưới.Nhấp vào tab này sẽ hiển thị một trường nơi bạn có thể nhập CSS tùy chỉnh.near the bottom. Clicking this tab will display a field where you can enter custom CSS.