【WordPress】ウィジェットアイテムの作成方法

【WordPress】ウィジェットアイテムの作成方法

htmlもCssも知らない営業担当者がWEB TOPページのキャンペーンの文言だけ自分で変更したいと伝えてきました。

んー、そこ画像で作ってるから画像での差替えが良いんだけどな。なので画像でくれれば変更何時でもしますよって伝えたら、画像なんて作れない。htmlもCssも覚える気は無いそうです。

私も同じ状況で誰も社内でやらなかったから覚えていったのに・・・、んー複雑な気持ちです。

まぁでも、どうせなら更新し易い様にhtmlもCssも分からなくても更新出来るようにしてみます。

sale_samlple

現在のバナーは上のような画像なのでこれを、背景と文言で分けていきます。

最終セール 9月13日迄!! の部分を自分で打てるようにします。

スポンサーリンク

ウィジェットアイテムで作成していきます。

本来なら以下のウィジェットアイテムのテキストで作成すればOKなのですが、コードもスタイルも書かないので、ウィジェットアイテムに記載するのはテキストの文字だけです。

そのため、既存のウィジェットアイテムは使えないので、新規に作成します。

htmlとCSSがわかる人ならこれでOKなのに。

まずは元になるソースを作成します。

ウィジェットアイテム化する前に、HtmlとCssで完成形を作成します。

今回は、画像を下に置き、テキストをpositionで上に持っていきます。

htmlはこんな感じ

cssはこんな

後はhtmlをウィジェットアイテムに落としこんでいきます。

fonction.phpに下記を記載します。

上記をfonction.phpに記載すると、ウィジェットに下記が表示されるはずです。

ウィジェット

下のテキストエリアに文字を打ち込めば、バナー(画像)の上に表示されます。

wiget2

以上です。

参考にさせて頂いたサイト

WordPressに簡単にウィジェットアイテムを追加するコード | sand a lot Web & Music Create [札幌]
スポンサーリンク

シェアする