【やってみた】WordPressのテーマ自作(15.テーマのアップロード-追補版)

今回の記事は、STEP5の「サーバーにUPしてWebに公開する」の「15.テーマのアップロード-追補版」の解説となります。完成した自作テーマに切り替えて、WordPressを運用した中で、気づいた課題点・改善点を対処した記録となります。

テーマ自作の流れ

STEP1:
静的サイトの作成
ワイヤーフレームでサイトをデザインして、HTMLとCSSで静的サイトを作成します。index.htmlとstyle.cssでサイトを作成します。
STEP2:
開発環境構築
自分のパソコン内部だけで開発と動作テストが行えるWordPress専用の環境構築ソフト、HTML、CSS、PHPの編集の為のソースコードエディタ、そしてHTMLとCSSで構築された静的サイトを準備します。
STEP3:
テーマの有効化
自作テーマを有効化する為に、index.htmlをindex.phpに書き換え、style.cssを作成してWordPressにアップロードして認識してもらいます。
STEP4:
WordPress関数に書き直す
テーマとして認識できましたら、index.phpの内容をヘッダー、フッター、サイドバー等コンテンツごとに分割したり、アイキャッチ画像やナビゲーションメニュー等を設定する為に、WordPress関数に書き直していきます。
STEP5:
サーバーにアップロード
サーバーにアップしてWebに公開します。
公開後、プラグインなどで必要な機能を追加したり、必要なカスタマイズを行います。

自作テーマが完成して、Cocoonから切り替えてWordPressで運用を開始した後に発生した課題点・改善点に対処しましたので、解説します。運用開始後にどのような問題がどのようにして発覚したのか?そして、どのように対処したのかを解説します。
WordPressの日々の運用は、googleアドセンス、googleanalytics、searchconsole、pagespeedinsightの確認から始まります。特に、searchconsoleのエクスペリエンス(ウェブに関する指標,モバイルユーザビリティ)やpagespeedinsightの分析結果から課題点を見つけ、原因を突き止めて対処・改善をしています。

解説動画は、こちら

修正漏れの対処
SEO対策
ページネーションの改良
1. ページネーションの書き換え
2. ページネーションの改善

修正漏れの対処

タグの修正

現象

＜/p＞タグが大文字となっている。

原因と対処

動画で解説していました際の入力ミスで、小文字に修正しました。

注意:
single.php,related.php,page.php,archive.phpは、index.phpをコピーして作成している為、こちらも修正します。

javascriptの読み込み

現象

script.jsが見つからない。

原因と対処

動画で解説していましたが、修正漏れをしていました。

jqueryの読み込み

header.phpに次の様にjqueryを読み込んでいましたが、jquery-migrate.min.jsが見つからないとなりますので、jQueryとMigrateを一旦解除し、jQueryのみを読み込む様にします。
注意:
jQuery Migrateとは、jQueryのバージョンアップによって削除されたり非推奨になった関数等をコンソールで教えてくれるプラグインです。何年も更新されていない古いテーマやプラグインを使っているサイトだとjQuery Migrateもあった方が良いかもしれませんが、そうでない場合は不要の様です。Wordpress付属のjQueryを読み込むと一緒にMigrateも読み込まれますので、以下のコードでjQueryのみを読み込みます。

[ jquery-migrateの読み込みを解除する方法 ]

留意:
WordPressに標準で組み込まれているjQueryを読み込むと、jquery-migrate.min.jsも一緒読み込まれるはずですが、自作テーマだからか?又はjqurery-migrateのバージョン違いなのか?エラーとなります。

SEO対策

「li」に対応する「ul」がない。

page speed insightで発覚しました課題を対応しました。