Sử dụng Javascript để sửa lỗi WordPress theo cách của wordpress-y

Bài đăng này ban đầu có tiêu đề: “Từ bỏ nền tảng, không phải người dùng: hoặc tại sao Javascript mang lại cho tôi hy vọng”

WordPress: Whoas & Woes

Tôi bắt đầu hành trình chuyên nghiệp của mình trong thế giới công nghệ với tư cách là người quản lý nội dung cho một trang WordPress. Điều này đã cho tôi rất nhiều cơ hội để xem WordPress có thể trở nên mỏng manh và cồng kềnh như thế nào. Tuy nhiên, quay trở lại năm 2009 trong một thế giới trước Squarespace, đó là một cách tốt để một đứa trẻ Liberal Arts không có nhiều kỹ năng viết mã có thể tạo ra một trang web đẹp với nhiều chức năng.

Kể từ khi tôi bắt đầu tìm hiểu về WordPress, đặc biệt là những điều kỳ quặc và thất vọng của nó, tôi đã muốn có một giải pháp ổn định hơn cho bản thân và khách hàng của mình. Nhưng, như chúng ta đều biết thay đổi cần có thời gian.

Khi tôi bước vào bốn tuần cuối cùng của Chương trình đào tạo Kỹ sư phần mềm của Trường Flatiron, tôi đã được một khách hàng lâu năm liên hệ để xin một số điều chỉnh và bổ sung cho trang WordPress của cô ấy.

Khách hàng là một nhà báo, chúng tôi cập nhật nội dung vài tuần một lần, tùy thuộc vào khối lượng công việc của cô ấy. Trang web đơn giản, dựa trên chủ đề thương mại và khá tối thiểu. Như vậy, nó không cho phép nhiều tác giả được liệt kê trên một bài đăng; và việc sửa đổi các tệp chủ đề (ngay cả chủ đề con) luôn dẫn đến các vấn đề cập nhật.

Chà, hồi tháng 2, cô ấy đã đồng viết một bài báo trên tờ Washington Post, yêu cầu chúng tôi xếp bốn tác giả lên trên mạng.

Trong thời gian làm việc tại Flatiron, số lượng công việc khách hàng tối thiểu của tôi diễn ra vào cuối tuần, tốt nhất là uống cà phê vào sáng thứ Bảy. Có nghĩa là, về điều cuối cùng tôi muốn làm là xây dựng một tính năng chủ đề WordPress mới.

Phiền phức.

Sự thất vọng.

Mong muốn xé nát trái tim đang đập ra khỏi lõi WordPress.

Vanilla Javascript để giải cứu

Tôi uống cà phê xong trong khi tải lên những câu chuyện mới, và tôi chợt nhận ra: Tôi đã tạo ra trang web này, vì vậy tôi có thể phá vỡ nó!

Tôi đã tạo ra trang web này, vì vậy tôi có thể phá vỡ nó

Thật ra, tôi nhận ra rằng không có gì là thiêng liêng và đôi khi một công việc được hoàn thành còn tốt hơn một công việc được hoàn thành một cách hoàn hảo. Với sự tự do mới được tìm thấy này, tôi đã chọn kết hợp giải pháp WordPress-y với giải pháp Javscript.

WordPress Plugins là tệ nhất

Mặc dù điều này ^ là đúng, chúng vẫn là một phần quan trọng của hệ sinh thái WordPress. Tôi đã chọn một cái cho phép tôi chỉ cần đưa Javscript hoặc CSS tùy chỉnh vào chân trang. Vì khách hàng này đang sử dụng dịch vụ lưu trữ được chia sẻ của GoDaddy (tôi biết, tôi biết …) nên việc chỉnh sửa các tệp chủ đề một cách an toàn trong quá trình sản xuất là một điều khó khăn. Vì vậy, một plugin.

Simple Custom CSS / JS là một plugin khá đơn giản và nó cung cấp một cách dễ dàng để chỉ cần đưa JS vào chân trang hoặc đầu trang.

Được rồi, bây giờ chúng ta đã có một cửa sổ nhỏ vào chủ đề, làm thế nào chúng ta có thể thêm 4 tên tác giả thay vì chỉ một tên?

Đơn giản như .append và .prepend

Để thực hiện điều chỉnh của chúng tôi, trước tiên, chúng tôi cần tìm nơi mà nó sẽ được tiêm. Vấn đề hàng đầu mà Ghi công tác giả trong bài đăng của chúng tôi trông như thế này:

<aside class="post-author">
  <em>by</em>
  <span itemprop="author">
    <a href="/author-bio" title="Posts by Author">
      Author Name
    </a>
  </span>
</aside>

Đó <span>chắc chắn là một yếu tố tốt để chúng tôi nhắm mục tiêu! Nếu chúng ta nhắm mục tiêu .post-author spanthì sao? điều đó sẽ đưa chúng ta đến đúng vị trí, sau đó chúng ta có thể thêm động một số phần tử mới vào.

Vì vậy, nếu Javascript của chúng ta trông giống như sau:

const authorSpan = document.querySelector(".post-author span")
const newspan = document.createElement("span")
authorSpan.prepend(newspan)

Điều đó kết nối chúng ta với phần tử trong HTML, sau đó tạo một khoảng mới và nối khoảng đó bên cạnh văn bản tác giả của chúng tôi. Bây giờ, chúng ta chỉ cần đặt văn bản của khoảng chúng ta đã tạo thành văn bản mà chúng ta muốn.

const authorSpan = document.querySelector(".post-author span")
const newspan = document.createElement("span")
authorSpan.prepend(newspan)
newspan.innerText = " Awesome Author, Rad Reader, Sweet Signature"

Gắn nó vào plugin và bùng nổ! Bạn đã khá nhiều tất cả các thiết lập! Chà, ngoại trừ thực tế là nó sẽ làm điều đó cho mọi bài đăng !

Lưu ý rằng plugin chỉ đưa vào toàn bộ trang web. Hmm, giá như có cách để chúng tôi chỉ nhắm mục tiêu bài đăng đó và chỉ khoảng thời gian đó.

Cảm ơn trời đất cho liên kết cố định WordPress

Vâng, thiết lập liên kết cố định đôi khi có thể khó khăn – nhưng nó rất hữu ích trong trường hợp này!

if (window.location.pathname === "/2022/02/20/post-name") {
const authorSpan = document.querySelector(".post-author span")
const newspan = document.createElement("span")
authorSpan.prepend(newspan)
newspan.innerText = " Awesome Author, Rad Reader, Sweet Signature"
}

Tốt hơn nhiều – một chút hiển thị có điều kiện dựa trên URL. Bây giờ, sau khi GoDaddy cuối cùng xóa bộ nhớ cache của chúng tôi, chúng tôi có thể thấy rằng trang web đã bị xóa các tác giả phụ và bài đăng mà chúng tôi muốn chỉnh sửa trông rất thông minh!

Sự kết luận

WordPress bốc mùi, nếu bạn ở đây, bạn biết điều đó. Nhưng, nó đã tồn tại từ rất lâu và là một lối vào đối với nhiều người trong chúng ta! Rất may, dù chỉ một chút kiến ​​thức về code cũng có thể tạo ra sự khác biệt rất lớn trong quá trình phát triển.

mã của tôi coda
1) Cảm ơn đã đọc, nếu tôi có gì sai, hãy cho tôi biết!

2) Luôn có những thứ cần cải thiện – chúng ta có thể làm gì tốt hơn ở đây?