はじめに
こちらの記事ではwordpressを用いてブログのサイドバーや、TOP下、記事下などに、
自作したウィジェット(HTMLなどでつくったもの)
を挿入する方法を紹介いたします!
どんなことができるようになるかといいますと、
こちらのおまめろぐの右側のプロフィールや、カテゴリボックスのようなものを作って挿入できるようになります!
こんなものや
このようなプロフィールカードなどを挿入できるようになります!
プロフィールカードや、カテゴリーボックスの作り方に関しては、ブログスキルカテゴリーで公開しておりますのでご確認いただければと思います!
カスタムHTMLの挿入方法
早速紹介していきます!
外観→ウィジェットを選択する
カスタムHTMLを選択→挿入したいスペースを選択
カスタムHTMLの中に任意のHTMLを挿入
ここまできたら後は好きなHTMLを組み込んで頂くだけになります!一度覚えていただければすぐに利用できますね!
わたしの場合はショートコードでいれています。ショートコードの作り方に関しては下記記事で紹介しております。
![記事を効率化!ショートコードを自作するプラグイン!WordPressでタグ&コードをショートコードで呼び出すSnippyの使い方](https://i0.wp.com/laplace-man.com/wp-content/uploads/2020/12/25df774820d30110f8a2b8ced30da05f.jpg?fit=300%2C218&ssl=1)
CSSに関しては外観→追加CSSに挿入するか
もしくはテーマエディターに挿入して編集をしましょう。
こちらに関しての詳細は下記で紹介しております!
![ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは?](https://i1.wp.com/laplace-man.com/wp-content/uploads/2020/12/66769c7aab181e38452220784c158370.jpg?fit=300%2C198&ssl=1)
最後に
いかがでしたでしょうか。
簡単な内容ですが、こちらを用いることで、同じWordpressのテーマを使っていても違うブログに見せることができますので、おすすめになります。
またブログ運営をしている中でHTML,CSSの基礎知識はおさえていただくことをおすすめしております。
基礎知識に関しては、無料体験などで簡単に理解することができますので、下記記事をご参考にいただければと思います。
![TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!](https://i1.wp.com/laplace-man.com/wp-content/uploads/2021/01/3190dc993d11fe11cfdd743a43869141.jpg?fit=300%2C194&ssl=1)
人生が変わるかも?本気でプログラミング教室に関して解説しております。
知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ!
[…] WordPressのブログでサイドバーに自作HTML、自作ウィジェットを追加する方法を解説 目次 1. はじめに 2. カスタムHTMLの挿入方法 3. 最後に はじめに こちらの記事ではwo […] […]