maki@cebulightningでヘッダーに電話番号やSNSボタンを表示する方法【デモあり】ツイートシェアはてブLINEPocketスポンサーリンクWordPressの公式無料テーマでLightningを使用しており、ヘッダーに電話番号やSNSボタンを表示させたい場合のカスタマイズについてご紹介いたします。元々のLightningデモサイトはこのような感じです。参考:https://demo-ja.lightning.nagoya/今回の完成イメージはこのような感じです。Wordpressの無料公式テーマLightningを使用して私が作成したサンプル歯科です。デモサイトはこちらヘッダー部分に電話番号やSNSボタンをつけます。Lightningの無料版だとこの部分に対応するウィジェットなどはありません。この固定されるヘッダーにはやはりお問い合わせできて行動の導線となるものが欲しいですよね!なので、選択肢としては有料プラグインを購入するか、自力でやるか・・・ということになります。今回は自力でやっていきます。header.phpに要素を追加していきます。・今回は子テーマを作成して編集していきます。・ソースいじりたくない、管理画面から楽に追加したいという方には公式サイトの有料プラグインが良いと思います。Proヘッダーの拡張機能だけではなく他にももろもろ含まれているようなので、工数を考えてのご相談でしょうね。・FontAwsome5を使用してSNSアイコンを出していきます。スポンサーリンクまずは子テーマを用意しましょうLightningを使用して何かしらの編集を行う場合は子テーマを用意しましょう。公式から無料でダウンロードできます。https://lightning.nagoya/ja/setting/customize/child_theme親テーマを直接編集すると、更新があったときに上書きされてしまいますので、子テーマを用意しておきましょう。FTPなどで子テーマの用意ができたら、親テーマからheader.phpをコピーして子テーマにおいてください。スポンサーリンクheader.phpに要素を追加していきます。ここからやることはシンプルです。header.phpにdiv要素を追加していきます。class="navbar-header">を探してください。何もいじってない状態であれば18行目ぐらいにあるかと思います。Chromeの検証機能を使って見るとこの部分が要素を追加する狙い目であることがわかります。そこに以下のように追加してください。FontAwsomeはversion5を使用しています。5px;}シンプルにできましたね!ということで今回はここまでです。うまく行かない!こんなカスタマイズもしたい!という方はお問い合わせよりご相談ください。WordPressの無料公式テーマLightningのカスタマイズも承ります。Lightningのカスタマイズにどれぐらい時間をかけましたか?Lightningのカスタマイズは本格的にやろうと思うとソースの読み込みがめんどくさいなどのデメリットがあります。Lightningのカスタマイズよりは有料テーマを買った方が早いという事実という別記事の後半でも書きましたが、もしあなたがホームページを作成しようと思ってlightningという無料のwordpressテーマに出会い、カスタマイズで4時間以上費やしているのであれば、いっそ有料テーマを買ってしまったほうが良いのではと思っています。デザインはある程度の身だしなみでしかなく、サイトの本質は中身(コンテンツ)だと私は考えているからです。以下はデザイン・SEO対策が施されている、コードをいじることなくカスタマイズしやすいという点で、オススメの有料日本語テーマです。:個人事業主や中小企業向けのサイトです。集客に特化したWordPressテーマでもあります。このレベルのサイトを自作するにしても外注するにしても相当なコストになるはずなので、サクッと買ってしまった方が楽ですね。:このブログでも使用しているテーマです。色の設定やサイドバーの設定などが楽すぎて泣けます。愛用者が多いので、ちょっとしたカスタマイズ情報がネットにたくさん転がっているのも良い点です。いうわけで今回はここまでです。form7で送信完了ページに遷移させる方法【トップページへの遷移も】プロフィールマキ日本にある外資系IT企業にて3年→セブ法人でブリッジSEを1年→フリーランスとなりました。これからもゆるく海外に住み続けます。