カスタムHTMLウィジェットの使い方

カスタムHTMLウィジェット

WordPressでサイドバーやウィジェットにブログパーツや広告、メールマガジンの登録フォームなど様々な種類のhtmlタグを貼ることが多々あります。

そのような場合は、WordPressのバージョン4.8から追加された「カスタムHTML」というウィジェットでhtmlタグなどを表示させることが可能です。

以前は「テキスト」ウィジェットの仕様が推奨されていましたし、そのまま使用することもできますが、「カスタムhtml」ウィジェットを使うことで、改行が無視されたり、表示速度が早くなるなどのメリットが多いようです。

今回は「カスタムHTML」ウィジェットを使ってサイドバーに広告のhtmlタグを貼りつける手順を初心者にもわかるように詳しく説明していきます。

「カスタムHTML」ウィジェットの使い方

以下が「カスタムHTML」の追加の手順です。

管理画面 → 外観 → ウィジェットを開く

今回は公開画面のサイドバーにクリック報酬型広告のタグを表示させていきます。

WordPress カスタムHTMLウィジェット 追加

まずWordPressの管理画面を開きます。

WordPressの管理画面の開き方 → WordPressの管理画面(ダッシュボード)を表示する

WordPress 管理画面

外観 → [ウィジェット]をクリックし、ウィジェット画面を開きます。

WordPress ウィジェット

左側が利用できるウィジェットで、右側がウィジェットエリアです。

様々なウィジェットを右側のウィジェットエリアに追加することで、ウィジェットを表示することが出来ます。

ウィジェットを追加する方法は、2パターンありますので両方説明していきます。

「カスタムHTML」ウィジェットをドラッグしてウィジェットエリアに追加する

左側のウィジェットが並んでいるところから、「カスタムhtml」ウィジェットを探します。

「カスタムhtml」ウィジェットをドラッグして、右側のウィジェットエリアに追加します。

ウィジェット追加 ドラッグアンドドロップ WordPress

ウィジェットエリアはテーマによって違いますが、今回は全てに共通して表示させたいため、[サイドバー(共通上部)]にドロップします。

ウィジェット追加 ドラッグアンドドロップ WordPress

「カスタムhtml」ウィジェットが追加されました。

カスタムhtmlウィジェト 追加 WordPress

「カスタムHTML」ウィジェットをクリックしてウィジェットエリアに追加する

左側のウィジェットが並んでいるところから、「カスタムHTML」ウィジェットを探します。

「カスタムHTML」ウィジェットをクリックします。

カスタムhtmlウィジェット 追加 クリック

追加したいウィジェットエリアを選択してクリックします。

今回は全てに共通して表示させたいため、[サイドバー(共通上部)]をクリックし、[ウィジェットを追加]をクリックします。

「カスタムHTML」ウィジェットが追加されました。

カスタムhtmlウィジェット 追加

一番下に追加されるので、「カスタムHTML」のタイトル部分をドラッグして、サイドバー(共通上部)の一番上にドラッグして位置を変えておきましょう。

カスタムhtmlウィジェト 追加 WordPress

「カスタムHTML」ウィジェットにhtmlタグを貼り付ける

今回はクリック報酬型広告のhtmlタグをコピーして貼り付けます。

まずはクリック報酬型広告のサイトからhtmlタグをコピーします。

「カスタムHTML」ウィジェットのパネルが開いていない場合、の「▼」をクリックし、パネルを開きます。

コピーしたhtmlタグを、「カスタムHTML」ウィジェットに貼り付けます。

カスタムHTMLタグ 貼り付け WordPress

保存ボタンをクリックします。

公開画面で確認する

WordPressの公開画面で確認を行います。

WordPress サイドバー ウィジェット

しっかりとウィジェットが表示されているのが確認できました。

これで「カスタムHTML」ウィジェットの追加は完了です。

「テキスト」ウィジェットと「カスタムHTML」ウィジェットの使い分け

テキストウィジェットが編集機能(リッチテキスト)が追加されたため、こちらの「カスタムHTML」ウィジェットが追加されました。

なので、htmlタグを貼り付ける場合は「カスタムHTML」ウィジェットを使うようにしましょう。

以前のバージョンからバージョンアップをした場合、「テキスト」ウィジェットのままの場合があります。

そのような場合、編集機能があるため、若干の表示の遅れが出たり、自動的にpタグが挿入されたり、改行が挿入されることがあるため、うまく表示されない場合があります。

その場合、「カスタムHTML」ウィジェットに変更するようにしましょう。

投稿者プロフィール

古田 健
古田 健
WordPressを使ったホームページの構築を得意としており、その中でも企業が勝ち残るため、強みを徹底的に研ぎすませた、一点突破型ランディングページを提案している。 ECサイトからスタートアップのサイトまで幅広く手がけ、、サイトの改善をおこなうことで、売上をあげる実践的なWebマーケティングを行っている。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です