閉じる
  1. iPhoneやiPadで誤ってアプリケーションを購入した場合の返金方法…
閉じる
閉じる
  1. 比較検証!AppleWatch Series 5のバッテリー持ちをモー…
  2. GSOMIAとはなんぞ?1分で要点だけを解説
  3. クーロン設定方法と記載方法かんたん紹介
  4. ‘bootstrap4’ is not a r…
  5. macでポート開放する簡単な方法
  6. Nginx + SSL(無料!)Let’s Encrypt…
  7. macのターミナルの入力が変(改行&文字入力が機能しない)
  8. ubuntu インストールしたパッケージをアンインストールする2つの方…
  9. XSEVERのネームサーバ設定
  10. AWS EC2サーバにSSH接続する方法とエラー回避の方法
閉じる

ALPHACAST|アルファキャスト

WordPress初心者脱出!ウィジェットエリアを追加してみよう

wordpressタイトル

難しくないよ!ウィジェットエリアを追加してみよう

WordPressテンプレートも万能ではありません。
テンプレートの導入で、サイトとしてある程度の体裁は整うのですが、
ここをこう・・・これは要らない、、と歯がゆく感じた経験はあると思います。

これは何も貴方が選んだテンプレートが無料だからではなく、
仮に勇気を出して高額なテンプレートを購入したとしても
用意された機能の範囲で満足する事は残念ながらありません。

と、前置きしたところで本題。

自由な場所にウィジェットを追加したい!

ウィジェットが配置できる場所は、なにもヘッダ、フッタ、サイドバーだけではありません(笑)テンプレート作者が「最低限必要でしょ」と用意してくれている場所、それが上記なだけです。

よく以下のウィジェットエリアたちを見かけませんか?

まーお約束!
しかしテンプレートとしては、これでも高機能な方ですね。クリエイター様に感謝感謝です。

さて、ここで貴方は以下のような希望を抱いたとします。

記事ページの内容の最初にアフィリエイト広告を表示したい。
しかも、広告の内容はウィジェットで簡単に差し替えられるようにしたい。

そのご希望よくわかります。ではちゃっちゃと実現しましょう。

ウィジェットエリア追加手順

先に、エリア追加後はこうなります。これを目指します。(”記事トップ広告1”エリアが追加されています)

 

functions.phpファイルを編集

基本的なWordPressテンプレートには必ずこのファイルがあります。
編集方法は以下。

1.WordPress左メニューの外観より「テーマの編集」を選択

2.テーマ編集画面の右メニューよりfunctions.phpを探してクリック

左メニューの構成や順序はテーマにより少々異なります。下の方にあるかもしれませんし、
画像のように日本語名称が表示されていないかもしれません。

3.functions.phpのソースコードに以下を追加

追加する場所は一番上でかまいません。

こんなかんじ。
表示されたエディタ画面が画像と違い白黒かもしれませんが、その点は気にせず。
その後、エディタ下にある「ファルを更新」ボタンを押下。

以上で完了!

それではウィジェットエリアが追加されたか実際に画面で確認してみましょう!
わくわく・・・

ウィジェットエリア追加確認

どや〜!!!無事表示されたでしょうか?
これでウィジェットエリア追加完了です。これだけでも初心者は余裕で脱出した気になりませんか??

これでほとんどの作業は完了したようなモノです。
最後は追加したウィジェットエリアを表示したい場所に1行の呪文を記載するだけ。
今回は「投稿ページ」の記事上段でしたね。

ウィジェットエリアの表示場所を指定する

投稿ページを表示するファイルに以下の呪文を記載します。

たった一行追加するだけ。
では、functions.phpを編集した時のように、テーマ編集画面を開きましょう。
ただし今回編集するのは「投稿ページ」の表示ファイルです。

私のテンプレートの場合、single.phpです。
ファイルはテンプレートにより異なる場合がありますが、”投稿ページ”や、”記事”と補足の付いたファイルがそれです。
では追加を、、、

さて、ここで思い通りの場所にビシャッと表示させるには、少しphpとHTMLの知識が必要です。
が。今回は記事の一番上ですので、おおよそファイルの上の方に追加してみてください。
もし上手く表示されなければ追加場所を少しずつ変更すれば良いのです。パズルを解くような気持ちで楽しんでやりましょう。

以上で全ての準備は整いました!
では実際に広告を追加してみましょう!

広告を追加する

広告リンクはAmazonや楽天など様々なASPが提供しています。
貴方の宣伝したい広告を自由に取得してください。
そして、今回追加した「記事トップ広告1」ウィジェットエリアに「カスタムHTML」ウィジェットで記載してください!

では実際の記事画面で確認してみましょう!
無事表示されましたか?
もし場所が違う、エラー画面が出た、などの場合は記述場所を変更してみてください!

その他、画像野追加や広告をサイドバーに増やすなど、色々と夢は広がりますね!
以上です!

ご覧頂きありがとうございました。

 

 

愛のおひねり




育毛剤

関連記事

  1. MAC VMware のショートカット:コピー&ペースト編

  2. VoiceOverを切る手順

    macがしゃべり出す「VoiceOver」を切る!うるせぇよ

  3. ubuntu

    ubuntu インストールしたパッケージをアンインストールする2…

  4. ピンチイン、ピンチアウトが効かない

    トラックパッドのピンチイン、アウトで拡大縮小出来ない場合の対処法…

  5. MACでの文字入力が超絶楽になるショートカット(優先別)

  6. AppleWatchでMACのロック解除が出来なくなった(解決)…

おすすめ記事

  1. iPhoneやiPadで誤ってアプリケーションを購入した場合の返金方法

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

想定年利5%の全自動型運用

年利5%の不動産運用

人気の記事

  1. AppleWatch5バッテリー
    AppleWatch Series 5のバッテリー持ちをモード別に比較した結果!AppleWat…
  2. GSOMIA(じーそみあ)とはこの「GSOMIA」という言葉だが、「General Securi…
  3. ubuntu
    クーロン設定方法と記載方法かんたん紹介クーロンを利用して仕事を自動化しましょう。エディタ起動…
  4. djangologo
    'bootstrap4' is not a registered tag librarydjan…
  5. macでポート開放する簡単な方法Pythonでシステム開発しているとき、ポートが既に使用されてい…
  6. ssl
    Nginx + SSL無料!Let's Encryptを設定しよう(Django+Ubuntu編)…

漠速!WordPress特化型サーバ登場

愛のおひねり

子供の頃、ファミコンより「MSX」に飛びついたマイノリティー。

当時、雑誌に掲載されていたソース(BASIC言語)を打ち込み無料でゲームを楽しみ悦に浸る。

某大手電機メーカーの情報システム部門勤務を経て独立。

現在はIT広告媒体全般を請け負う便利屋。

趣味:
ビリヤード、フルート、カラオケ、Amazonプライムビデオ観賞