VPS

WordPressの始め方&有用プラグイン/テーマ/開発法まとめ

目次

初めに

このページでは、Webサイトを作る時に、現在1番使われているCMSでもありWebフレームワークでもある、WordPressの使い方について解説しています。
そもそもWeb制作が初めての方でしたら、「ゼロ(企画)から始めるWebサイト制作全手順」の方からご参照頂く事をお勧めします(カバー範囲が広いので初心者から上級者までの範囲をカバーしています)。

WordPressとは&世界のWebサイトでのシェアとその価値

WordPressは世界で1番のシェアを占めるCGM(コンテンツマネジメント)の無料ソフトです。

機能をプラグインというもので手軽に拡張できるので、ブログやニュースサイトに使われるだけでなく、○○データベースみたいなサービスにも使われています。
VpsHikaku.comもWordPressをCGM部分については基盤として活用しています。

CGMだけでなく、Webサイト全体で見ても、上位1000万サイトの内、その40%がWordPressで作られているという調査結果が出ており、またそのシェアも伸び続けているので、WordPressを使う事はWebサイト運営を運営する(Web技術者になる)為の第一歩になります。

[世界のトラフィック上位1000万サイトでのWordPressが使われている割合推移(ソース)]

しかも、シェアは毎年伸び続けているので、シェアが50%超える日ももう見えてきている状態です。
[WordPressが10年間毎年シェアを伸ばしてきた記録]

ここではWordPressを使えるようになる方法について
①レンタルサーバーのテンプレートを使って構築する方法
②VPSのテンプレートを使って構築する方法
③自分でゼロからインストールする方法(公式のやり方とよりエンジニア向きのやり方)
について、説明させて頂きます。

①→②→③
と求められる技術レベルは上がりますが、必ずしも技術・運用レベルの高さが一番求められる③が、サービス運用上一番良い選択肢とは限らないという事を理解した上で、自分にとって最適なインストール・設定方法を選んで下さい。

ちょっと脱線話: WebエンジニアにとってのWordPressは敵?無視すべきもの?

Webシステムとして存在感が増すばかりのWordPress。
でもエンジニアにとっては、自分は要らないと言われてるかの様で&非技術者でも出来るものだから、WordPressは敵だ・無視すべきだ、という態度になりがちな面もあります。

しかし、WordPressの採用がWebサービスの過半数をもうかがう状況で、勿論シェア的に無視できる技術ではなく、Webエンジニアなのに、非エンジニアよりWordPressを使いこなせないのは、残念ながらWebエンジニアとして基礎力が欠陥してると言われても仕方ないでしょう。

そもそも0から何かを開発する事はプログラマーにとっては美徳ではなく(既存のものが提供出来てる機能を開発する事は「車輪を再開発してる」と揶揄される)、WordPressで出来る事ならWPを活用して開発せずに、素早く低コストで目的を実現し運用も楽しつつ、技術者じゃなきゃできない事にその上でフォーカスし、WordPressの活用レベルも上げていく方が正解です。
結局プログラミングはライブラリを使っている事に依存する様に、それがより製品度合いが高いレベルで、組み合わせる要素(Plugin/テーマ等)ができているのがWordPressということになり、技術者としてはニーズに応じて、ベストなPluginの組み合わせ・設定を提案できる、ITソリューション提供のエキスパートになっておく必要があります。
その部品の粒度・機能がニーズを満たせない場合に、初めて自分で開発する理由・価値が生まれますが、その為にもWordPressで出来る事とその限界を知っておく事は、技術者の素養として習得が不可欠です。

そして、技術者の視点ですと、WordPressの活用はなるべくエンジニア以外の人だけで完結できる範囲を広げてあげつつ、それでも技術者がいた方が効率が良い部分を見出し・フォーカスして、関わっていくのが良いという事になります。
非技術者が完結して出来る事を増やす事は、より技術的にチャレンジで価値を有むことな事にフォーカス出来る時間を増やす事に繋がるという意味でも、決してマイナスではないです。

そもそも自分の給与はプロジェクトの成功があってこそなので、プロジェクトの成功に対して最短で走れるのなら迷わずWordPressを提案し、そうでないのならそうでない技術的ソリューションを提案するという、技術ソリューションの提案・実行を適切に高いレベルで出来る事が、Webエンジニアとしては求められます。

利用開始方法1(初級者向): WordPressのインストールテンプレートを用意しているレンタルサーバー

利用開始方法

レンタルサーバー(共有サーバー)は、WordPressのインストールテンプレートを用意しているので、使い始めるだけならば、画面案内に従っているだけで簡単に行えます。
ドメインの設定からサイトの立ち上げまで一貫して出来るタイプのサービスの利用が良いでしょう。
レンタルサーバー比較.comの方で、主要なレンタルサーバーのスペック比較・絞込みが出来るので、「WordPress可能」の絞込み機能を活用して、最適なレンタルサーバーをお選び下さい。

メリット

– サーバーの運用は完全にレンタルサーバー運営者側に任せる事ができる。
– またWPの設定・インストールが、技術的な知識がない人でも、かなり楽に行う事が出来る。
– 料金も安い

デメリット

– レンタルサーバー会社の設定にお任せなので、他のレンタルサーバーやインフラへの移行は、自分がゼロから構築してる環境に比べて困難
– 共有サーバーとしての特性上、同じサーバーで使っている他ユーザーの状況によっては、サーバーが不安定化する事がありえる

利用開始方法2(中級者向): WordPressのインストールテンプレートを用意しているVPS

利用開始方法

使うサーバーのスペックを選んで、後はWordPressがインストールされた状態のサーバーとして起動する事を選ぶと、WordPressがインストールされた状態のVPSサーバが使えるサービスになります。

但し、自分で管理するVPSサーバーとして提供されてくるものなので、VPSサーバー自体の運用は自分でしていく必要が出てきます。

その代わり、簡単にWordPressを利用出来るという事と、WordPressに対する自由度の最大化と、サーバの独立性を兼ねれる選択になります。
逆に言えばWordPress本体の更新等も自分でやっていかなくてはいけませんが。

どのVPSが良いかは、VPS性能比較表お勧めVPS選択フローチャート、そしてそれぞれのVPSの特徴解説ページを見て決めて頂ければと。
以下がWordPressのインストールテンプレートを提供しているVPSになります。

AWS Lightsail WordPressアイコンをクリックしてインスタンス作成
ConoHa アプリケーションタブをクリックして「かんたんKUSANAGI」を選べば良い。但し「かんたんクサナギ」はメモリ1GB以上のインスタンスでないと選べない。唯の「WordPress(KUSANAGI)」なら512MBのプランでも可
DigitalOcean MarketplaceタブをクリックしWordPressを選択。OSはUbuntuになる
Linode サーバを追加する時にOne ClickタブをクリックしてWordPressを選択
Vultr サーバを追加する時にApplicationタブをクリックしてWordPressを選択(OSはUbuntu)

メリット

– サーバのリソースをレンタルサーバーに比べて高いレベルで占有出来、他ユーザーの利用状況の影響を基本的には受けずに済む
– すぐ簡単にWordPressを使い始める事が出来る

デメリット

– サーバーの運用は自分でするのに、最初の設定をVPSにお任せしてしまう為、技術的に必要な知識がないまま、運用をしてしまうという事が起こり得る

利用開始方法3(上級者向): 自分で0からWordPressをインストール

メリット

プラグインのバージョン管理すらソースコードで行えるので、アップデートで問題が起きても、特定のプラグインだけバージョンを下げるといった方法で問題を解決する事が出来る。

デメリット

完全に自前でインストール・運用をしていくので、いわゆるインフラエンジニアとしての知識・経験が要求される。

利用方法

前準備

  1. 利用するインフラ選び: VPS比較 または Publicクラウド比較
  2. OS設定
  3. Webサーバー設定: Apache または nginx
  4. PHP7.x
  5. データベース: MariaDB または MySQL

のインストールを済ましてからこの作業を行います。


WordPress運営の公式のマニュアルに従ったインストール

流れとしては、https://wordpress.org/download/からWordPressのソースファイルをダウンロードし、圧縮されたファイルを解凍し、必要な設定をしていく事になります。

そこからの詳しい手順については、公式の手順に従う場合には、こちらの外部文章をご参照下さい。


エンジニア向きのcomposerでバージョン管理しdockerで開発環境構築する方法

・composer(WP本体/Plugin/テーマの管理は全てcomposer経由でする)
・ローカルの開発環境はdockerで簡単に立ち上げられる
という構成として、テンプレレポジトリを
https://github.com/hikarine3/docker-bedrock-wordpress
で提供させて頂いております。

Composerの仕組みについてはhttps://roots.io/bedrock/をベースにしています。

肝はPHPのcomposerでWordpressの全ての更新を管理する事ですが、Dockerもセットになっているので、ローカルPCでの開発も手軽にする事ができる構成になっており、便利かと思います。

composerとdockerの使い方が分かる方はお試し下さい。

WordPressをインストールした後の設定

ユーザーの追加

自分だけが編集するのなら、最初に作った自分のアカウントだけで十分ですが、他の方も編集する場合には、他の方もユーザーとして追加する必要があります。
権限として、ソフトのインストール等まで許したいのなら、管理者、そうでなく投稿するだけなら寄稿者を選びましょう。

「設定 > 一般(Settings > General)」の設定

  1. サイトのタイトルをSEOの側面も考えつつ適切に設定
  2. “Just another WordPress site”という値が入っているキャッチフレーズは、必要なければ(必要ない事多い)空に変更
  3. タイムゾーンをUTC+0からUTC+9に変更する(=日本の時間)
  4. 日付のフォーマットを自分が表示したい形式に変更
  5. 時刻フォーマットを自分が表示したい形式に変更

し保存


「設定 > 投稿設定の設定」

もしもブログを描かれるのならば、更新情報を送るPingサーバーを追加指定しましょう。
日本で生きてるブログ検索のPingサーバーはブログ検索/解析 皆声のPingサーバー位ですが、折角なのでついでしておいて頂ければと。
Pingサーバーのアドレスは
https://ping.minakoe.jp/ping/xmlrpc.asp
です。


「設定 > 表示設定」の設定

トップページに投稿した記事一覧ではなく、自分が編集したページを表示したい場合、「投稿 > 固定ページ」でページを投稿・公開した後、「ホームページの表示」にてトップページとして表示する固定ページをここで選択・保存します。


「設定 > パーマリンク設定」の設定

SEOを考え、共通設定で「投稿名」がファイルパスになるように選ぶ


余計なページの削除

デフォルトでのサンプルページが出来ているので削除する。
PagesからはSample Page、PostsからはHello World!を選んで、Move to TrashをApplyで削除。


Google Analyticsタグの設定

https://analytics.google.com/analytics/web/
からトラッキングコードをコピーして持ってくる。
Analyticsのコードは、Google Analyticsの管理画面に行って、
プロパティ>トラッキング情報>トラッキングコード
で得る事ができます。

それからWordPressの
設定 > Header Footer HTML
に行って(Simple Header Footer Pluginがインストールされている事前提)、Headerのどちらかの入力欄にトラッキングコードを挿入する。

自分の場合は、直接Google Analyticsのトラッキングコードを入れるのではなく、Google Tag Managerという、コード管理ツールを通じて呼び出すようにしていますが

上級者向けなので、初心者の方は直接Google Analyticsのトラッキングコードを埋め込むで良いでしょう。


WordPressの役立ちプラグイン

公式のWordPressプラグインリストから自分の用途に合いそうなプラグインを検索してインストールしていく事になります。
インストールしたら、Activateする事で使えるようになります。
プラグインによってはそこから更なる設定が必要になったりするので、Activateしたらそのプラグインの設定画面も確認してみましょう。

自分は以下のようなプラグインを使っているので、参考にしてみて下さい。


サイト移転

ファイルExport/Importで移転できる: All-in-One WP Migration (ニーズによって価値有り)

https://wordpress.org/plugins/all-in-one-wp-migration/
WPのデータベースの中身の異なるドメイン等のサーバー間の移動に使えます。
とはいえ、自分で色々変更できるサーバーはともかく、ファイルサイズ等レンタルサーバーでは諸々制限で動かない事も。
レンサバの場合は、WordPress移行系サービスの出来の違いがポイントになります。
但し、実際に使ってみないと、謳い文句のように簡単に移行できるかどうかは分からないので、試用期間中に作業を終えるように注意。


エディター・コンテンツ生成補助系

旧エディターの作動再現: Classic Editor (ニーズによって価値有り)

https://wordpress.org/plugins/classic-editor/
新エディターに慣れれない&整合性が維持できない&コードを簡単に直接書きたいという方向け。


記事のコピーを作る: Yoast Duplicate Post (全サイトに必須)

https://ja.wordpress.org/plugins/duplicate-post/
ある記事をベースにに別の記事を作るのに使う


ショートコードでHTML/PHPの共通埋め込み: Post Snippets (全サイトに必須)

https://ja.wordpress.org/plugins/post-snippets/
「…….」
というHTMLコードを管理画面で登録する事で、
[code1]
と書くだけで埋め込むことが出来る。
同じ事を別ページで書く時に活用でき、HP作りの「部品化」の一助になる。

自分は、これとJSの読み込みを活用して、WordPress上のデータの更新・Viewの更新を行っている。
JSの中身のセキュリティ向上には、
obfuscator
でJSの中身の難読化を行ってから、WPのサーバーに上げるようにしている。


著者情報を表示: Simple Author Box (ニーズによって価値有り)

https://wordpress.org/plugins/simple-author-box/
各記事の下への著者情報掲載


プログラムのコード表示: SyntaxHighlighter Evolved (ニーズによって価値有り)

https://ja.wordpress.org/plugins/syntaxhighlighter/
プログラムのコードを行番号付きで表示できる。
他プラグインだと中身によっては適切に表示できなかったが、これは問題なかったので、このプラグインを選択


見出しメニューの自動生成: Table of Contents Plus (全サイトに必須)

https://ja.wordpress.org/plugins/table-of-contents-plus/
Hタグから自動的にメニューリスト&ページ内移動リンクを作ってくれる


Header、Footer部分へのコード挿入: Simple Header Footer HTML (全サイトに必須)

https://wordpress.org/plugins/simple-header-footer-html/
全ページの開始(headタグ内)・終了部分(body閉じ前)に任意のコードを挿入できる


投稿できるファイルタイプの拡張: WP Extra File Types (ニーズによって価値有り)

https://wordpress.org/plugins/wp-extra-file-types/
xlsとかがWordPressではメディアファイルとして添付投稿しようとすると、セキュリティの問題でと出てアップロードできなかったりしますが、これを使うとその制限を緩める事が出来ます。
なお、デフォルトではxlsが表示されていませんが、チェックボックスをチェックすると表示される。


管理画面強化

更新日付の表示: Show modified Date in admin lists (全サイトに必須)

Show modified Date in admin lists
管理画面の投稿記事リストには作成日は表示されますが、更新日は表示されません。
このプラグインを入れる事で、更新日の追加表示を行う事ができます。


日本語対応

日本語名ファイルの扱いが安定する: WP Multibyte Patch (全サイトに必須)

https://wordpress.org/plugins/wp-multibyte-patch/
WPの日本語に対する挙動で問題がある点を修正してくれる。
特にアップロードするファイルにマルチバイトが含まれてる時に、それをマルチバイトでないファイル名に変更してくれるのは、サイト移転プラグイン等、マルチバイトのファイルに対して問題解決してくれるので、目に見えないがとても役に立つ。


多言語化

Polylang (ニーズによって価値有り)

https://wordpress.org/plugins/polylang/
Wordpressの同じ記事について、別の言語に翻訳して管理する時に役立ちます。
一つ記事を書いたら、プラスボタンを押す事で、記事に紐付ける形で他の言語の記事を書けます。


画像圧縮系

画像ファイルの圧縮: Compress JPEG & PNG images (全サイトに必須)

https://wordpress.org/plugins/tiny-compress-images/
アップロードする画像を最適化してくれ、ファイルサイズを小さくしてくれる。
画像圧縮プラグインはこれ以外にも有りますが、どれかは入れる事が必須と考えて良いでしょう。


速度向上系Plugin

表示サイズ削減: Autoptimize (全サイトに必須)

https://wordpress.org/plugins/autoptimize/
複数のファイルをまとめてリクエスト数を減らしたり、空白等影響ない文字消してサイズ圧縮してくれる。

Google Page Speed Insights
での点数上げに活用できる。

また、WordPressのテーマにはGoogle Fontsが含まれている事も多いかと思いますが、それが点数を下げる大きな要因になっている事もあります。
その場合は、AutoptimizeのExtraタブからGoogle Fontsをオフにする事も出来ます。
デザインを取るか速度を取るかはそのサイトの性質次第ですが、速度を取る場合には、有効な機能です。

CSS、HTMLの最適化は、大概問題ないですが、JavaScriptの最適化は、問題が起きる事があります。
自分のサイトの場合は、ブラウザーがフリーズする状態になってしまうので、JavaScriptの最適化機能は使っていません。

それでも大きなGoogle Page Speed Insightsの得点向上をもたらしてくれます。

尚、Cache Enablerと役割分担して、Cache Enablerにキャッシュの方は任せられるとの事でしたが、Cache Enablerをオンにしても点数が有意に上がったという形にはならなかったので、Cache Enabler Pluginは使わず、Autoptimizeプラグインだけ自分は使っています。

自分のAutoptimizeの設定例


フォーム系

定番入力フォーム: Contact Form 7 (全サイトに必須)

https://ja.wordpress.org/plugins/contact-form-7/
フォーム機能を実現する定番プラグイン
スパム申込を避ける為、Contact > Integration > reCAPTCHAで、Site KeyとSecret Keyを設定して、スパム投稿防止対策をした方が良い


定番入力フォームのDB保存: Contact Form CFDB7 (全サイトに必須)

https://ja.wordpress.org/plugins/contact-form-cfdb7/
Contact Form 7経由で申し込まれたデータを、専用のテーブルに保存出来る。
そうでないとPost用テーブルに保存され、DBの中身としては滅茶苦茶になってしまうので。


Cookieの値の受取制御: CookieMonster (ニーズによって価値有り)

https://ja.wordpress.org/plugins/cookiemonster/
Cookieの値を埋め込めるようになる。
広告経由等でユーザを誘導した場合、この機能を使って経路情報をCookieに保存していた場合、この機能を使って成果と経路を結びつける事ができる。
上級者向けの機能


セキュリティ系

ログインURLの変更: WPS Hide Login (全サイトに必須)

https://ja.wordpress.org/plugins/wps-hide-login/
WordPressの管理画面のログインページがデフォルトのままにしておくのは、自動的にアタックされ最大のセキュリティホールになりますが、ログインページのURLを任意のURLに変更する事が出来ます。

プラグインをインストール・有効化してから管理画面で
設定 > 一般
と移動して、そのページの下部で自分だけへの秘密のログインURLを設定する。


著者ページの無効化: Disable Author Pages (全サイトに必須)

https://wordpress.org/plugins/disable-author-pages/
ID漏れとかでセキュリティホールになり易いAuthor Pageの機能をオフにする。
これをしていデフォルトのWordPressだと
ワードプレスのルートURLに
/?author=1
と付けると
最初のユーザーのIDが含まれたURLに飛ぶ=管理者のログインIDが漏れる
というセキュリティ問題が簡単に発生する。

その上で、WordPressのログインURLを変えてなければ、パスワードをランダムに変えてログインを試みるパスワード総当たり攻撃でパスワード防御を破られ、WordPressを乗っ取られる。

WordPressの攻撃の王道の1つ。


コメントの無効化: Disable Comments (ニーズによって価値有り)

https://ja.wordpress.org/plugins/disable-comments/
コメントスパムとかばかりだしそもそも使わないしという事でコメント機能は止めたい、というケースに役立つ。


Rest APIの無効化: Disable Rest API (全サイトに必須)

https://ja.wordpress.org/plugins/disable-json-api/
セキュリティホールとなる可能性を消す為に、Rest APIを無効にするプラグイン。
これが有効だと、WordPressの全ユーザー情報が
/wp-json/wp/v2/users
にアクセスするだけでのぞけたりしてしまいます。
ログインIDやEmail情報が漏れたりします。

色々な大企業のサイトでも、そんな状態な所が多いです。
普通にWebブラウザーからログインして、記事の投稿・WordPressの設定しかしないのなら、絶対にRest APIはこのプラグインで無効化しておきましょう。


XML RPCの無効化: Disable XML RPC (全サイトに必須)

https://ja.wordpress.org/plugins/disable-xml-rpc/
セキュリティホールとなる可能性を消す為に、XML RPCを無効にするプラグイン。
xmlrpc.phpはXMLRPCプロトコル経由でのWPの操作を可能にする為
– ID/パスワードをぐるぐる変えてログイン出来るか試していく総当たり攻撃(IDはWPの別の各種セキュリティの問題で既に割り出されてる事が多い)
– その性質上、他のサイトへのDDoS攻撃をする為のポイントとしての活用
をされてしまうので、普通にWebブラウザーからログインして、記事の投稿・WordPressの設定しかしないのなら、絶対にXML RPCはこのプラグインで無効化しておきましょう。

↓みたいな攻撃が何もしてなければ繰り返される事になる


各種セキュリティ設定: iThemes Security (全サイトに必須)

https://wordpress.org/plugins/better-wp-security/
WordPressのセキュリティの底上げに使う。
防御だけでなく、攻撃をメールで通知してくれたりします。


内部操作ログ: Simple History (ニーズによって価値有り)

https://wordpress.org/plugins/simple-history/
WordPress管理画面での操作履歴を記録し、内部監査等に役立てれる


メール系

メール送信: WP Mail SMTP (全サイトに必須)

https://wordpress.org/plugins/wp-mail-smtp/
WordPressからのメールを、Gmail等のSMTPサーバ経由で送れるようになる。
WordPress自体のインスタンスからのメール送信は正常に作動しない事が多いので、便利なプラグイン。
とはいえVersion2.5.0以降は、GmailのSMTPを使おうとすると、セキュリティ的に問題のある設定が求められるので(Gmailの全権限の譲渡の許可を求められる)、GmailのSMTPを使うのならば、Version2.4.0に固定して使う必要がある。
Sendgridみたいな他サービスを使うのならば、最新版を使っても問題ない。


メルマガ系

メルマガ申込/管理: Newsletter (ニーズによって価値有り)

https://wordpress.org/plugins/newsletter/
メルマガ登録から発行にまで使える


SEO系

メタタグ/Open Graph等設定用: SEO Press (全サイトに必須)

https://ja.wordpress.org/plugins/wp-seopress/
Open Graph、メタタグ、リダイレクトといった設定が出来るようになる。


更新日付表示用: WP Last Modified Info (全サイトに必須)

https://wordpress.org/plugins/wp-last-modified-info/
通常WordPressは記事の作成日が表示されますが、それと併記して更新日の表示が出来る。
Googleは検索結果に、記事の作成日を表示したりするので、更新を重ねている記事が、実態以上に古く見えてしまう事がある。
それを防ぐ為に使っている。
自分は、息の長い記事を作る事が多いというのもあるが、このプラグインをオンにした場合は、WordPressの記事の日付のフォーマットを空にして、更新日の方だけ表示されるようにしている。

なお、テーマによってはうまく作動されない可能性はあり。


自分のサイトに合ったテーマのインストール

https://ja.wordpress.org/themes/
から自分に合うテーマを探して、インストール&カスタマイズ設定をします。

尚、上記公式サイト以外で配布しているテーマもありますが、そうしたものはテストの保障がされないので、基本的には手を出さず、上記公式サイトから見つかるテーマをご使用される事をお勧めします。

また、インストールした後に、使いたいテーマを選んでActivateする必要があります。

テーマ固有のCSSカスタマイズは、テーマにカスタマイズCSS入力欄があるのなら、そこを編集して入力しておきましょう。


最終確認

セキュリティチェック

https://gf.dev/wordpress-security-scanner
は詳しいセキュリティレポートを無料で作ってくれるので、サイトが完成したら走らせてみて、セキュリティの問題がないか確認してみましょう。


速度チェック

ここは値を見ても、どう改善できるかは、手に余るもものかもしれませんが、Googleによるページ速度認識をテストしておきましょう。
Google Page Speed
Googleはページ速度を検索結果の上位表示で考慮するようになっている為、この結果の向上は検索順位の向上(SEO)につながります。

WordPressの開発方法: 機能の自力での拡張&その為の便利な技法

WordPressはプラグインで機能を拡張できますが、機能不足の場合、本体やプラグインのソースを弄りたくなってしまうと思います。
但し、可能な限り、それは避けるべきです。
何故なら、自分が編集してしまった第三者のファイルは、第三者がアップデートした時に、それで上書きされる=それを避ける為に、自動アップデートは不可能になってしまう為です。

それよりはPost SnipetsやSimple Header Footerプラグインの設定画面にJavaScript(jQuery/Vue/React等)/CSSを書き、それで解決できる事はJSで解決させて、本体・プラグインのアップデート可を担保した方が良いでしょう。
そのJS自体は別途ソースコードとしてgitのレポジトリの中で管理して、更新したらコピペして管理画面から反映という方法は、かなり無難な運用かと思います。

例えばjQueryの場合

jQuery("$指定エレメント").html("書き換える中身");
jQuery("$指定エレメント").prepend("要素の前に加える中身");
jQuery("$指定エレメント").prepend("要素の後に加える中身");
// 消し去る
jQuery("$指定エレメント").remove();

を駆使する事で、テーマ元々のコードを触らなくても、自由自在に書き換える事が出来ます。

特定のURLだけで条件で処理を発動したい場合は

if(location.href.indexOf("/...../URL.html" >= 0)) {
// 処理
}

とif文で囲めば実現する事が出来ます。

ただ、結果、それなりのJavaScript寄りの技術の発揮を求められる事にはなりますが、アップデートの運用負荷等を考えると、PHPを直接触ってしまうよりかは、結果として楽な運用が出来るでしょう。

CSSの適用は、各記事にCSSを書く事はテキスト入力で可能ですが、サイト全体や複数のサイトで使う場合には、
・利用してるテーマ限定のCSSなら各テーマ付属のCSS入力欄
・Simple Header Footer HTMLプラグインの機能
・Post Snippetのショートコード機能(HTMLだけでなくPHPコードも埋め込み可能)
を活用してグローバルなCSSやJSは設定したりすることが出来るので、その機能を上手く活用しましょう。

エンジニアな方の場合には、Post Snippetで読み込むCSS/JSのパスを定義してバージョン制御しつつ、CSSとJS自体はバージョン管理しつつ、サーバーにコマンドでCSS/JSファイルをアップロードする事で更新するというフローも考えられるかと思います。

その他関連文章

本格的なWeb開発手法の説明になっていますが
ゼロ(企画)から始めるWebサイト全作成手順
は、Webサイトを作る多くの方にとって、基本から応用迄の視点で役立つかと思いますので、ご参考にして見て頂ければと。

VPSニュース
2021/12/2 KAGOYA VPS[解説]が大容量プラン追加。Disk単価200-800GBで最安に
2021/11/29 お名前.com[解説]のSSD化/新コンパネ情報を解説とベンチマーク結果に反映
2021/10/11 1ドル113円台まで円が下落してる為、為替手数料等も考え1ドル115円で海外発VPS/クラウド価格を計算し直しました [更に読む]