WordPressのブログでサイドバーに自作HTML、自作ウィジェットを追加する方法を解説

WordPressのブログでサイドバーに自作HTML、自作ウィジェットを追加する方法を解説

はじめに

こちらの記事ではwordpressを用いてブログのサイドバーや、TOP下、記事下などに、

自作したウィジェット(HTMLなどでつくったもの)

を挿入する方法を紹介いたします!

どんなことができるようになるかといいますと、

こちらのおまめろぐの右側のプロフィールや、カテゴリボックスのようなものを作って挿入できるようになります!

wordpress-sidebar-originalhtml1

こんなものや

wordpress-sidebar-originalhtml2

このようなプロフィールカードなどを挿入できるようになります!

プロフィールカードや、カテゴリーボックスの作り方に関しては、ブログスキルカテゴリーで公開しておりますのでご確認いただければと思います!

カスタムHTMLの挿入方法

早速紹介していきます!

外観→ウィジェットを選択する

wordpress-sidebar-originalhtml3

カスタムHTMLを選択→挿入したいスペースを選択

wordpress-sidebar-originalhtml4

カスタムHTMLの中に任意のHTMLを挿入

ここまできたら後は好きなHTMLを組み込んで頂くだけになります!一度覚えていただければすぐに利用できますね!

wordpress-sidebar-originalhtml5

わたしの場合はショートコードでいれています。ショートコードの作り方に関しては下記記事で紹介しております。

記事を効率化!ショートコードを自作するプラグイン!WordPressでタグ&コードをショートコードで呼び出すSnippyの使い方
記事を効率化!ショートコードを自作するプラグイン!WordPressでタグ&コードをショートコードで呼び出すSnippyの使い方
目次 1. はじめに2. 1.Snippy プラグインのインストール方法3. 2.Snippyの使い […]

CSSに関しては外観→追加CSSに挿入するか

もしくはテーマエディターに挿入して編集をしましょう。

こちらに関しての詳細は下記で紹介しております!

ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは?
ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは?
目次 1. はじめに 2. ワードプレスのテーマエディターを利用してCSSを編集する方法 3. Wo […]

最後に

いかがでしたでしょうか。

簡単な内容ですが、こちらを用いることで、同じWordpressのテーマを使っていても違うブログに見せることができますので、おすすめになります。

またブログ運営をしている中でHTML,CSSの基礎知識はおさえていただくことをおすすめしております。

基礎知識に関しては、無料体験などで簡単に理解することができますので、下記記事をご参考にいただければと思います。

TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
目次 1. はじめに 2. TechAcademyとは? 2.1. 運営会社 2.2. TechAc […]

人生が変わるかも?本気でプログラミング教室に関して解説しております。


知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ!

 

 

WordPressカテゴリの最新記事