JavaScriptを使用してWordPressの迷惑を修正する

このポストはもともとタイトルでした
Jimmy JinのUnsplashによる写真

WordPress : WooasとWOOES

私は、WordPressサイトのためのコンテンツマネージャーとして、Tech Worldで私の専門の旅行を始めました.これは私がどのように脆弱で面倒なワードプレスを見ることができる機会をたくさん与えた.しかし、2009年に戻って前スクウェアの世界では、リベラルアーツの子供のための良い方法のコードのスキルのトンを一緒に適切な機能を備えたまともなウェブサイトを置くことだった.
以来、私はWordPress、特にその風変わりと挫折について学ぶために始めたので、私は自分とクライアントのためのより安定したソリューションを望んでいた.しかし、私たちはすべての変化は時間がかかる知っている.
Flatiron School Software Engineering Bootcampの最後の4週間に、私は長い時間クライアントにいくつかの調整と彼女のWordPressサイトへの追加の連絡を受けました.
クライアントは、ジャーナリスト、我々はコンテンツを更新する数週間ごとに、彼女の仕事の負荷に応じて.サイトは、商業的なテーマに基づいて、簡単ではなく、最小限です.そのように、それは複数の著者が1つのポストに記載されるのを許しません;そして、テーマファイル(子供のテーマであっても)を変更すると、常に問題が更新されます.
さて、2月に戻ると、彼女はワシントンポスト紙を共同執筆しました.
Flatironの私の時間の間、クライアント仕事の私の最小限の量は、週末、好ましくは土曜日の朝コーヒーに起こります.つまり、私がしたいことは、新しいWordPressテーマ機能を構築することです.

Annoyance.

Frustration.

Desire to tear the beating heart out of the Wordpress core.

バニラJavaScriptレスキュー

私は新しい物語をアップロードしている間、私のコーヒーを終えました、そして、それは私に起こりました.

I made this site, so I can break it

実際には、何も神聖であり、時には仕事は完全に仕事よりも優れていることに気づいた.この新しい発見された自由で、私はJavScriptソリューションでvery Wordpress-y解決を結合することを選びました.

WordPressプラグインは最悪です

これが真実であるにもかかわらず、彼らはまだWordPress生態系の重要な部分です.私は、フッターにカスタムJavscriptまたはCSSを注入させるものを選びました.このクライアントはgodaddy共有ホスティングにあるので(私は知っています.)これは、生産に安全にテーマファイルを編集するロイヤルペインです.したがって、プラグイン.
Simple Custom CSS/JSはかなりシンプルなプラグインで、フッターやヘッダーにJSを注入する簡単な方法を提供します.
さて、今、我々は1つの代わりに4つの著者名を加えることができる方法についてのMuckingに小さなウインドウを持っていますか?

として簡単です。アペンド.前置する

我々の調整をするために、我々は最初に注射されるべき場所を見つける必要がありました.私たちの投稿の著者の帰属の一番上の問題は、次のようになります.

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

その<span>は確かにターゲットに良い要素のように見える!私たちが.post-author spanを目標とするならば、どうですか?それは正しい場所に私たちを取得する必要がありますし、動的にいくつかの新しい要素を追加することができます.
したがって、JavaScriptがこのように見えるならば

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

これは、HTMLの要素に接続し、新しいスパンを作成し、そのスパンを著者のテキストの横に追加します.今、我々はちょうど我々が欲しいテキストに作成されたスパンのテキストを設定する必要があります.

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

プラグインには、ブームとスティック!あなたはほとんどすべてのセットです!まあ、それはすべての単一のポストにそれを行うという事実を除いて!

プラグインがサイト全体を注入することに注意してください.うーん、私たちがちょうどそのちょうどポストを目標とする方法があったならば、そして、そのスパン.

WordPress permalinksに感謝します

ええ、permalinkセットアップは、時々痛みでありえます-しかし、それはこのケースで役に立ちます!

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"
}

より良い- URLに基づいて条件付きレンダリングの小さなビット.今、Godaddy最終的に我々のキャッシュをクリアした後、我々はサイトが余分な著者のクリアされていることを確認することができますし、我々はタッチしたいポストはスマートです!

結論

WordPressは、あなたがここにいるならば、あなたはそれを知っています.しかし、それは長い間、されて、我々の多くのための入場方法でした!ありがたいことに、ほんの少しのコード知識でさえ、開発プロセスに大きな違いがある.
マイコードコーダ
1読んでくれてありがとう、何か悪いことがあったら教えて!
2)常に改善することがあります-私たちはより良いここで何を行うことができますか?