閉じる
  1. iPhoneやiPadで誤ってアプリケーションを購入した場合の返金方法…
閉じる
閉じる
  1. vimでペースト・貼り付けたら余計なインデントが混ざる(解決)
  2. ヤフーショップが個人出店者をヤフオクへ強制移店させるそうだ(期限は来年…
  3. トラックパッドのピンチイン、アウトで拡大縮小出来ない場合の対処法
  4. 海外のGoogleで検索する方法とURLを紹介します
  5. VMware上の仮想OSでキーボード、マウスが効かない(解決)
  6. サイトをまるごとダウンロードする方法(wgetコマンド編)
  7. 最新OS「Mojave」の新機能。デスクトップアイコンをまとめて整理す…
  8. WordPressが遅い!ページ表示を高速化するプラグインWP-Opt…
  9. PythonでScrapyインストール時にエラー発生。解決!
  10. Excelで簡単に日付と時刻を入力する方法(ショートカット活用)
閉じる

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での文字入力が超絶楽になるショートカット(優先別)

  2. AppleStore京都にオープン!

    Apple Store 京都店がすごい事になっている!

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

  4. 2018年新型Mac Book Proがスゴイ!

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

  6. MACで真っ白なウインドウが消えない問題を解消する

おすすめ記事

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

コメント

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

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

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

人気の記事

  1. vimでペースト・貼り付けたら余計なインデントが混ざる(解決)
    vimでペースト・貼り付けたら余計なインデントが混ざる(解決)コーディング中、ソース範囲を選択し…
  2. ヤフーショッピング
    ヤフーショップから個人出店者が消滅!移行期限は来年6月末!なんだこれは。Yahoo!ショッピ…
  3. ピンチイン、ピンチアウトが効かない
    MACのトラックパッドで「ピンチイン、アウト」効かない場合の対処法MacBook Proのトラッ…
  4. Google検索方法
    海外のGoogleで検索する方法をご紹介海外のGoogle結果を検索したいことってありますよね。…
  5. vmwareでキーボードが効かない
    VMwareで起動したOSへキーボード、マウスが反応しない環境 ツール:VMware…
  6. wgetのコマンド紹介
    サイトをローカルにダウンロードする方法(wgetコマンド編)コマンドラインからサイトをまるごとダ…

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

愛のおひねり

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

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

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

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

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