記事タイトルの上に広告を表示する・wordpressテーマSTINGER3

公開日: : 最終更新日:2014/08/20 広告を入れるぞよ , ,

 wordpressテーマSTINGER3には、広告表示用のウィジェットが付いている。

 でも、広告の位置は決められた場所になってしまう。

 ウィジェットを利用しないでSTINGER3の好きな位置に広告を配置しよう。

 今回は記事の上に広告を表示してみる。

スポンサーリンク

バックアップ用のツールを用意しよう

 phpをいじるので、バックアップは必ず取ろう。

 まず必要なのは、文字コード(UTF-8BDMなし)と改行コード(LF)を指定して保存できるテキストエディタ。

 Windows付属のメモ帳などはだめ!

 いろいろとフリーソフトが出ているので使い勝手の良いものを選ぼう。

wordpressテーマSTINGER3の記事タイトルの上に広告を表示する

1、【外観】⇒【テーマの編集】⇒【単一記事の投稿 (single.php)】をクリック。

 他のテーマの場合もほぼ同じ。

 単一記事の投稿 (single.php)をカスタマイズする。

2、マウスを右クリックして、すべて選択。

3、コピー。

4、テキストエディタに貼り付け、元のphpを保存しておく。

5、<?php get_header(); ?>の下に以下の記述を貼り付ける。

<!--▼記事ページのみ表示-->
<div class="ad10">
<?php if(is_single()): ?>
<!--▼スマートフォンのみ表示-->
<?php if (wp_is_mobile()) :?>
ここに広告コード
<?php endif; ?>
<!--▲スマートフォンのみ表示-->
<!--▼PCのみ表示-->
<?php if (!wp_is_mobile()) :?>
ここに広告コード
<?php endif; ?><!--▲PCのみ表示-->
<?php endif; ?>
</div>
<!--▲記事ページのみ表示-->

6、【ファイルを更新】をクリック。

記述(コード)の説明

<div class="ad10"></div>

 広告コードの配置をスタイルシートで決めるための記述。

 ad10は英数字なら何でもOK。

 わかりやすいものを設定しよう。

<?php if(is_single()): ?><?php endif; ?>

 記事のページだけに表示したい場合の条件分岐の記述。

<?php if (wp_is_mobile()) :?><?php endif; ?>

 モバイルだけに表示したい場合の条件分岐の記述。

<?php if (!wp_is_mobile()) :?><?php endif; ?>

 モバイルに表示したくない場合の記述。

<!-- -->

 コメント、ブログには表示されない。

スタイルシートの設定

1、【外観】⇒【テーマの編集】⇒【スタイルシート (style.css)】または【smart.css】 をクリック。

 wordpressテーマSTINGER3の場合、PC用のスタイルシートは【スタイルシート (style.css)】。

 モバイル用は【smart.css】。

 別々に設定する。

2、マウスを右クリックして、すべて選択。

3、コピー。

4、テキストエディタに貼り付け、元のphpを保存しておく。

5、スタイルシートの最後に.ad10 {}でスタイルを指定する。

例)
/*---------------------------------
広告
--------------------------------*/
 .ad10{ margin: 10px 20px 30px 40px;}

 この記述だと広告を表示したブロックの[上][右][下][左]に隙間が出来る。

 上10px、右20px、下30px、左40px、といった感じ。

6、【ファイルを更新】をクリック。

他のテーマでも基本は同じ

 今回はSTINGER3で説明したけど、他のテーマでも記事タイトルの下に広告などを表示する方法はほぼ同じだ。

 【単一記事の投稿 (single.php)】をカスタマイズする。

 広告だけでなく、定型文なども同じ方法で入れることが出来る。

  • にほんブログ村 ブログブログ ブログノウハウへ
    にほんブログ村
  • FC2ブログランキング
  • このエントリーをはてなブックマークに追加

関連記事

wordpressに広告を表示する

トップページやアーカイブページの任意の記事の下に広告を入れる

 トップページやアーカイブページに複数の記事が表示されるように設定している場合に、任意の記事の下

記事を読む

wordpressに広告を表示する

記事の途中で広告を入れるプラグイン

 wordpressで記事の途中で広告が入っているのを見たことがあると思う。  実はこのサイト

記事を読む

wordpressに広告を表示する

プラグインを使わずにWordPressの記事の中に広告を入れる方法

 Wordpressの単独記事の中に広告などを入れる場合方法はいくつかある。  今回はプラグイ

記事を読む

wordpressに広告を表示する

広告を横に並べて表示

 今回は、広告を横に並べて表示してみる。  テーブルを使うと簡単なのだが、レイアウトにテーブル

記事を読む

WordpressテーマSimplicity

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。  見た目はごくシンプルなW

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のスマートフォン表示で広告が途中で切れるを解決

 STINGER3で広告を表示すると広告が半分に切れたりする。  プラグインやウィジェットを使

記事を読む

Message

メールアドレスが公開されることはありません。


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


follow us in feedly

応援してね⇒にほんブログ村 ブログブログ ブログノウハウへにほんブログ村

ワードプレスのテキストとビジュアルのタブの切り替えができない

 しばらくぶりにブログを更新しようと思ってみたら、ワードプレスの更新や

プラグインを使わずにソースコードを表示させる方法

 ソースコードを表示させるのに便利なのはプラグインの利用。  で

ソースコードの解説にCrayon Syntax Highlighter

 Webサイト上でHTML/CSSやプログラミングのコードを解説す

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。

お客様のホームページがアップロードされていない状態です

 Wordpressの手動インストールで無事インストールできたのに

WordPressテーマGush2のTOPページアーカイブページに要約を表示する

 Wordpressの無料テンプレート(テーマ)Gush2はすっき

FC2ブログとWordPressのURLの構造法則と変数

 記事数の多いFC2ブログを変数を使ってWordpressに引越し

記事数の多いFC2ブログの引越しは変数で作業時間短縮

 FC2ブログからWordpressへの引越し第二段。  FC2

プラグインの内容をメモできるWordPressプラグイン

 Wordpressのプラグインは便利だが、説明文が英語のせいで中

WordPressのカテゴリーの管理画面にIDを表示できるようにするカスタマイズ

 Wordpressのカテゴリーの管理画面に記事のIDを表示できる

海外スパムをシャットアウト「Throws SPAM Away」日本産プラグイン

 Wordpressでブログを運営していると英語のスパムコメントが

→wordpress初心者・STINGER3カスタマイズ中の記事をもっと見る

Googleでブログを作ろう 
 Googleの無料ブログサービスBloggerで作っているブログ。
 Bloggerの設定やカスタマイズ方法などを載せている。

使える無料ソフト&無料サービス
 高いパソコンに入ってるようなソフトは必要ない!をコンセプトに無料ソフトや無料のWEBサービスをご紹介。

  • コメントテスト

  • PAGE TOP ↑