クレジットカード不要
1) 新しいウェブサイトを作成し、単に「テーマを切り替える」ことができなかった理由
最初に変更の必要性を認識したとき、タスクは単純に思えました。「トップ ブロックを変更して、行動喚起をより効果的にする」。表面的には、これは簡単な解決策のように見えるかもしれませんが、すぐに、この小さなタスクによって、サイトの構造とデザインに関するはるかに大きな根本的な問題が明らかになったことに気付きました。問題は 1 つのブロックだけではありませんでした。サイトのアーキテクチャ全体を徹底的に見直す必要がありました。
当社の Web サイトは時間をかけて構築され、統一されたテーマやテンプレートはなく、さまざまなデザインやレイアウトを使用してさまざまなページが追加されていました。各ページのデザインはそれぞれ異なっており、クリエイティブに聞こえるかもしれませんが、一貫性がないという重大な問題を引き起こしました。サイトの残りの部分はそのままにして、トップ ブロックのみを新しいデザインにすると、700 を超えるページと投稿のそのブロックを手動で更新することになります。さらに悪いことに、この手動のプロセスは、将来変更を加えたいときに毎回繰り返す必要があります。何百ページものページをくまなく調べて、それぞれが最新の更新になっていることを確認する非効率性を想像してみてください。古いサイトを使い続けることは持続可能ではないことがすぐに明らかになりました。
各ページを更新するロジスティクスだけでなく、全体的なユーザー エクスペリエンスも考慮する必要がありました。今日のユーザーは、Web サイトにアクセスするときにシームレスで一貫性のあるエクスペリエンスを期待しています。ページをスクロールダウンして、デザインに一貫性がなく、各ブロックで異なるスタイルが使用されていることに気付いた場合、まとまりがなくプロフェッショナルではない印象を与えます。さらに悪いことに、ユーザーがあるページから別のページに移動したときに、レイアウトとデザインがまったく異なることに気付いた場合、混乱感が強まります。
不一致はレイアウトだけにとどまりませんでした。サイト上の画像の多くは時代遅れで、スタイルが悪く、ニューラル ネットワークによって不適切に生成されたものでした。これらの画像は現代のデザイン標準に沿うものではなく、置き換えるのも困難な作業でした。質の悪い画像の使用はサイト全体の品質に悪影響を及ぼし、提供している製品やサービスに対してユーザーに悪い印象を与えてしまいます。
Elementor のようなツールを使用してサイトを包括的に更新する簡単な方法はありませんでした。各ページとブロックには独自のインライン スタイルが含まれていたため、グローバルに変更を加えることはできませんでした。サイトのスタイルを更新したい場合は、すべてのページを調べて各ブロックを手動で更新する必要があり、時間がかかり、非効率的です。これを念頭に置いて、私たちの唯一の解決策は新しい Web サイトをゼロから構築することであることが明らかになりました。これにより、同じ URL を維持しながら、新しく一貫性があり、簡単に更新できるデザインですべてのコンテンツを転送できるようになります。
2) 使用しないことにした理由 Elementor
Elementor は、最も人気のあるページ ビルダーの 1 つです WordPress。表面的には、迅速かつ簡単なページ作成を可能にする優れたツールのようです。しかし、広範囲に取り組んだ結果、いくつかの制限に遭遇し、Elementor から離れ、代わりにカスタム構築された Web サイトを選択することにしました。
Elementor’s 制限と課題:
- バグとグリッチ: Elementorは多くの便利な機能を提供していますが、技術的な問題がないわけではありません。たとえば、ページをコピーして編集しようとすると、変更を加える前であっても、新しいページが元のページとは異なるように見えることがよくありました。“最大画像幅” プロパティが正しく機能しないなど、要素の表示方法に頻繁にバグが発生しました。これらの不具合により、ページ全体で一貫したスタイルを確保することが困難になりました。
- 創造の自由が多すぎると、一貫性が失われます: Elementor’ の主なセールスポイントの 1 つは、すべてをカスタマイズできることです。ただし、特に複数の編集者がサイトで作業している場合、この柔軟性は諸刃の剣となる可能性があります。専門家でない人が意図せず一貫性のないデザインのページを作成してしまうことはよくあります。たとえば、編集者がピンクのボタンにピンクのテキストを使用したり、背景にオレンジ色の三角形を追加したりして、乱雑でわかりにくいデザインになっている例を見ました。厳格なデザインシステムが整備されていなければ、一貫したビジュアルアイデンティティを維持することは不可能でした。
- 高度な機能のための限定的なカスタマイズ: Elementor はテキストと画像を使用した基本的なページ構築に優れていますが、カスタム機能を追加する必要がある場合はさらに困難になります。多くの場合、組み込みブロックに限定されており、より複雑な機能に合わせてカスタマイズするのは困難でした。基本的なレイアウトを超えてニーズが高まるにつれて、Elementor’ の限界がますます明らかになりました。
- コードの肥大化とパフォーマンスの問題: Elementor’ページを構築する方法では、要素の過剰なネストが発生します。例えば、Elementorは自動的に複数を生成する
他のコンテナ内のコンテナ要素にはそれぞれ独自のスタイル セットがあります。その結果、構造が肥大化し、読み込み速度、ページのパフォーマンス、そして最終的には Web サイトの SEO ランキングに悪影響を及ぼします。速度テストを実行したところ、結果は一貫して悪く、Elementor によって生成された重いコードが主な原因でした。 - A/B テスト機能はありません: 今日のデジタル環境では、ユーザーエクスペリエンスを最適化するためにA/Bテストが不可欠です。ただし、Elementor では、異なるバージョンのサイトを異なるユーザーに表示する機能は提供されません。誰もが同じサイトを見るため、色、ボタンの形状、背景画像などのデザイン要素をテストして微調整する能力が制限されます。この機能がなければ、実際のユーザーの行動に基づいてサイトを最適化することはできません。
- データベースブロート: おそらく、Elementor の最も重大な欠点の 1 つは、スタイルとコンテンツの処理方法です。Elementor スタイル、ネストされた構造、およびその他の不要なタグをデータベース内のコンテンツに混ぜて保存します。これにより、データベースが肥大化し、Elementor が無効またはアンインストールされてもクリーンアップされません。その結果、新しいテーマやフレームワークに切り替えても問題は解決しません – これらのスタイルはページに埋め込まれたままであり、引き続き問題を引き起こします。
これらすべての課題を念頭に置いて、より堅牢なソリューションが必要であることが明らかになりました。私たちは、Elementor を使用せずに、より持続可能で柔軟なアプローチを選択して、新しい独立した Web サイトを構築することを決定しました。
3) 新しいサイトでページを作成する方法
新しいサイトをゼロから構築することで、ページを作成するための明確で合理化されたプロセスを確立する機会が得られました。新しいシステムでは、ページの作成は簡単です。
- WordPress 管理パネルにログインし、 「ページ」->「新しいページの追加」をクリックします。
- 標準の WordPress エディターが表示され、テキストを入力または貼り付けたり、リンクを追加したり、画像をアップロードしたりできます。
このプロセスはシンプルですが柔軟です。WordPress のコンテンツ エディターは、Elementor’ の複雑なブロック システムに依存する代わりに、はるかにクリーンになり、迅速な更新と簡単なカスタマイズが可能になります。エディタの下には、 の設定があります 高度なカスタムフィールド（ACF）は、サイト全体で一貫性を維持するようにすでに構成されています。
ACF を使用すると、コンテンツ 1…コンテンツ 15などのブロックを使用して柔軟なコンテンツ セクションを作成できます。これらのブロックでは、ページの各セクションのタイトル、テキスト、画像、ボタン ラベルを簡単に設定できます。これらのブロックは、画像とテキストの配置を自動的に切り替えるため、手動で調整しなくても、レイアウトが視覚的に魅力的に保たれます。
画像については、サイトの主な色にグラデーションを自動的に適用するカラーマッチング システムを実装しました。これにより、すべての画像が全体的な美観に一致するようになります。色をそのまま維持する必要があるロゴやスクリーンショットの場合は、グラデーションを上書きする「色を保持」オプションがあります。
このシステムは、すべてのページでデザインの一貫性を維持しながらコンテンツ管理を簡素化します。
4) 新しい投稿を作成する方法
新しいサイトで投稿を作成する手順は、ページを作成する場合と同じ合理化されたプロセスに従いますが、いくつかの重要な違いがあります。
- 投稿の URL には../blog/..が含まれ、ページと区別されます。
- 右側のサイドバーには、最新の記事 3 件が自動的に表示されるブロックがあり、ブログをダイナミックかつ魅力的なものにするのに役立ちます。
すべての投稿のテンプレートは、各ブログ投稿の構造とレイアウトを処理するファイルtemplate-parts/content/content-single.phpにあります。この一貫したテンプレートにより、更新が容易になり、すべての投稿が同じデザイン ガイドラインに準拠することが保証されます。
5) 高度なカスタムフィールド (ACF)
ACF は、新しい Web サイトの開発に不可欠な要素です。これにより、WordPress 管理パネルから簡単に管理できるカスタム フィールドを作成できます。content_1 などのフィールドは PHP コードで参照されるため、各ページや投稿に適切なコンテンツを動的に取り込むことができます。
この柔軟性は、必要に応じてカスタマイズする余地を残しながら、サイトを効率的に管理および更新するために不可欠です。
6) A/Bテスト
新しいサイトで行った最も重要な改善点の 1 つは、A/B テストの実装です。A/B テストでは、サイトの 2 つのバージョンを比較して、どちらがユーザーにとってより効果的かを確認できます。これには、さまざまな色、ボタンの形状、背景、さらにはレイアウトのテストも含まれます。
この機能は、URL のGET パラメータを使用して実装しました。たとえば、異なる URL を持つ 2 つの同一の広告キャンペーンを作成できます。
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
ユーザーがこれらのリンクをクリックすると、パラメータが Cookie に保存されます。パラメータの値に応じて、サイトは異なるボタンの色や背景画像など、ページの異なるバージョンを表示します。これにより、ユーザーの好みや行動に関する貴重なデータを収集できます。
すべてのイベントは .csv ファイルと MySQL データベースに保存されるため、データを分析し、サイトの改善について情報に基づいた決定を下すことができます。
7) functions.php ファイル
- カスタム投稿タイプと分類
functions.phpファイルの主な用途の 1 つは、カスタム投稿タイプと分類法を作成することです。これにより、コンテンツをより効果的に整理できるようになりました。デフォルトの WordPress 構造 (ページと投稿) だけに頼るのではなく、ケース スタディ、お客様の声、製品機能などの特定のコンテンツにカスタム タイプを導入しました。これにより、コンテンツが整理されただけでなく、ナビゲートしやすくなり、関連情報を見つけやすくなり、ユーザー エクスペリエンスも向上しました。
たとえば、ケーススタディ用のカスタム投稿タイプを作成するには、 functions.phpに次のコードを追加します。
関数create_case_study_post_type() {
register_post_type( 'ケーススタディ',
配列（
'ラベル' =>配列（
'name' => __( 'ケーススタディ' ),
'singular_name' => __( 'ケーススタディ' )
),'public' => true、
'has_archive' => true、
'rewrite' => 配列('slug' => 'case-studies')、
)
);
}
add_action( 'init', 'create_case_study_post_type' );
これにより、「ケーススタディ」という新しい投稿タイプが作成されました。これは通常の投稿と同様に動作しますが、独自のアーカイブと分類構造を備えています。
- 外部スクリプトとスタイルの読み込み
functions.phpのもう 1 つの重要な用途は、外部のスクリプトとスタイルを読み込み、Web サイトに必要なライブラリとフレームワークがすべて揃っていることを確認することでした。たとえば、スライダー用のSlick.jsやスムーズなアニメーション用のAOS (Animate on Scroll) などのライブラリを統合しました。必要なとき (特定のページやテンプレートなど) にのみこれらのアセットを選択的に読み込むことで、不要な肥大化を減らし、ページの読み込み速度を改善しました。
スタイルとスクリプトの読み込みは次のように処理しました。
関数load_custom_scripts() {
// 特定のテンプレートの Slick スライダーをロードする
if(is_page_template('template-slider.php')) {
wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/css/slick.css' );
wp_enqueue_script( 'slick-js'、 get_template_directory_uri() 。 '/js/slick.min.js'、 配列('jquery')、 '', true );
} // サイト全体で AOS アニメーションをロードする
wp_enqueue_style( 'aos-css', get_template_directory_uri() . '/css/aos.css' );
wp_enqueue_script( 'aos-js', get_template_directory_uri() . '/js/aos.js', 配列('jquery'), '', true );
}
アクションを追加します( 'wp_enqueue_scripts', 'load_custom_scripts' );
条件チェック（例： ページテンプレート()）、不要なスクリプトがサイト全体に読み込まれないようにし、パフォーマンスを最適化しました。
- カスタムショートコード
技術に詳しくないユーザーがサイト コンテンツを管理する際の柔軟性を向上させるために、 functions.php経由でカスタム ショートコードを追加しました。これらのショートコードにより、ユーザーはコードに触れることなく、複雑な機能やスタイル設定された要素を簡単に挿入できるようになりました。たとえば、サイト上の任意の場所にカスタム ボタンを追加するためのショートコードを作成しました。
[編集済み]
このショートコードにより、編集者はカスタムテキストと URL を含むボタンを簡単に追加できるようになり、デザインを崩すことなく素早く調整できるようになりました。
8) SEOとサイト速度の対応
Web サイトの全面見直しでは、SEO とサイト全体のパフォーマンスの向上に主な焦点が当てられました。Elementor を使用して構築された元のサイトでは、コードの肥大化と最適化されていない画像により、読み込み時間が遅く、SEO 慣行が最適ではないという問題がありました。
SEOの改善
新しいサイトが SEO フレンドリーであることを保証するために、私たちは最初からいくつかのベストプラクティスを実装しました。
-
セマンティックHTML : ヘッダータグを適切に使用してサイトのHTMLを慎重に構造化しました（
、など）、検索エンジンがコンテンツ階層を簡単に解析して理解できるようにします。これは、SEO ランキングとアクセシビリティの両方にとって特に重要です。 - メタタグとオープングラフデータ: Yoast SEOプラグインを活用して、メタタイトル、説明、ソーシャル共有用のオープングラフデータを処理しました。Yoast を使用することで、検索エンジンでの可視性とソーシャル メディア プラットフォームからのクリックスルー率にとって重要な、各ページと投稿のメタデータが最適化されていることを確認しました。
- スキーマ マークアップ: functions.phpファイルを使用して、構造化データ用のカスタム スキーマ マークアップを追加し、検索エンジンが検索結果にページを表示する方法を改善しました。たとえば、記事、ケース スタディ、製品のスキーマを含めて、検索エンジンがコンテンツをより適切に分類できるようにしました。
関数 add_schema_markup() {
エコー '
{
"@context": "http://schema.org",
"@type": "組織",
"名前": "ConveyThis",
"url": "https://www.conveythis.com",
"ロゴ": "https://www.conveythis.com/logo.png",
"同じ": [
「https://www.facebook.com/conveythis」、
「https://twitter.com/conveythis」
]
}
';
}
add_action( 'wp_head', 'add_schema_markup' );
サイト速度の最適化
パフォーマンスは、ユーザー エクスペリエンスだけでなく SEO ランキングにとっても重要な要素です。サイト速度を改善するために、いくつかの手順を実行しました。
- 画像の最適化: PNG や JPEG などの従来の形式よりも優れた圧縮率を提供するWebPなどの最新の画像形式を使用しました。すべての画像は、ユーザーの画面解像度に基づいて適切なサイズで提供され、モバイル デバイスでも読み込み時間が短縮されます。
- 遅延読み込み: 画像の遅延読み込みを実装することで、ユーザーの画面に表示される画像のみが最初に読み込まれるようになりました。ユーザーがスクロールすると追加の画像が読み込まれるため、最初のページの読み込み時間が短縮されます。
- キャッシュとミニフィケーション: WP Rocket を使ってHTML、CSS、 JavaScript ファイルのキャッシュ、ミニフィケーション、圧縮を行いました。WP Rocketは、全体のファイルサイズを削減し、ページの静的なキャッシュ版を繰り返し訪れるユーザーに提供することで、より速いロード時間を達成するのに役立ちました。
9) データベースの最適化とクリーンアップ
古い Web サイトには、“1” の肥大化と非効率なデータベース構造により、大量の 《ジャンク》’ データが蓄積されていました。新しいサイトがスムーズに実行されるように、データベースの徹底的なクリーンアップと最適化を実行しました。
- 古い Elementor データの削除
前述したように、Elementor を無効にした後でも、そのスタイルと設定は依然としてデータベースに埋め込まれていました。カスタム クエリを使用して、この余分なデータを削除し、データベースをクリーンアップしました。さらに、時間の経過とともに蓄積された未使用のメディア ファイル、ポスト リビジョン、期限切れのトランジェントも削除しました。
- データベースのインデックス作成
また、頻繁にクエリされる列にインデックスを追加することでデータベースを最適化し、データベースクエリの高速化と効率化を図りました。たとえば、 投稿日 列により最近の投稿に関連するクエリが高速化され、ブログ ページのパフォーマンスが向上しました。
結論
新しい Web サイトをゼロから構築するという決定は、古いサイトの制限と非効率性によって推進されました。テーマを切り替えるだけでは、デザインの不一致、スタイルの肥大化、Elementor によるパフォーマンスの問題のため、実行可能な選択肢ではありませんでした。カスタム開発と高度なカスタム フィールドを備えた新しいサイトを作成することで、合理化されたアップデートと A/B テスト機能を可能にしながらユーザー エクスペリエンスを向上させる、より効率的で一貫性のあるプロフェッショナルな Web サイトを実現しました。この新しいサイトは、将来の成長と改善のための強固な基盤を提供します。
この投稿を要約すると次のようになります:
始める する準備はできましたか?
翻訳は、単に言語を知るということ以上の複雑なプロセスです。
私たちのヒントに従って使用することによって ConveyThis翻訳されたページは、ターゲット言語にネイティブであると感じられ、読者の共感を呼ぶでしょう。
努力が必要ですが、結果はやりがいがあります。ウェブサイトを翻訳する場合、ConveyThis 自動機械翻訳により時間を節約できます。
ConveyThis を 3 日間無料でお試しください!
CONVEYTHIS