「MediaWikiにGoogle AdSenseを追加してみた」の版間の差分

提供: とある社畜の頭脳整理
ナビゲーションに移動 検索に移動
(ページの作成:「MediaWikiにGoogle AdSenseを使って、広告を追加してみたよ。<br/> 僕的にページの上部に「ビッグバナー」タイプを、ページの下部に…」)
 
 
(同じ利用者による、間の3版が非表示)
11行目: 11行目:
 
<li>コンソールアプリケーションなどを使って、サーバーにログインしてね。</li>
 
<li>コンソールアプリケーションなどを使って、サーバーにログインしてね。</li>
 
<li>以下のコマンドを実行して、「HTMLets」を展開するよ。
 
<li>以下のコマンドを実行して、「HTMLets」を展開するよ。
<pre>
+
<syntaxhighlight lang="bash">
 
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/HTMLets.git
 
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/HTMLets.git
</pre>
+
</syntaxhighlight>
 
</li>
 
</li>
 
<li>LocalSettings.phpの最後に以下の行を追加してね。
 
<li>LocalSettings.phpの最後に以下の行を追加してね。
<pre>
+
<syntaxhighlight lang="php">
 
require_once "$IP/extensions/HTMLets/HTMLets.php";
 
require_once "$IP/extensions/HTMLets/HTMLets.php";
 
$wgHTMLetsDirectory = "$IP/htmlets";
 
$wgHTMLetsDirectory = "$IP/htmlets";
</pre>
+
</syntaxhighlight>
 
「$wgHTMLetsDirectory」はJavaScriptのソースを置く場所になるよ。好きなところに変更しても良いかもね。
 
「$wgHTMLetsDirectory」はJavaScriptのソースを置く場所になるよ。好きなところに変更しても良いかもね。
 
</li>
 
</li>
 
<li>手前の手順で「$wgHTMLetsDirectory」に設定したパスにディレクトリを作成するよ。コマンドは以下の通りだよ。
 
<li>手前の手順で「$wgHTMLetsDirectory」に設定したパスにディレクトリを作成するよ。コマンドは以下の通りだよ。
<pre>
+
<syntaxhighlight lang="bash">
 
mkdir [作成したいディレクトリ名]
 
mkdir [作成したいディレクトリ名]
</pre>
+
</syntaxhighlight>
 
「$wgHTMLetsDirectory = "$IP/htmlets";」と設定した場合は以下の様になるよ。
 
「$wgHTMLetsDirectory = "$IP/htmlets";」と設定した場合は以下の様になるよ。
<pre>
+
<syntaxhighlight lang="bash">
 
MediaWikiをインストールしたディレクトリで…
 
MediaWikiをインストールしたディレクトリで…
 
mkdir htmlets
 
mkdir htmlets
</pre>
+
</syntaxhighlight>
 
</li>
 
</li>
 
</ol>
 
</ol>
42行目: 42行目:
 
<li>適当なhtmlファイルを作成して、アドセンスのコードを貼り付けてね。僕は参考サイトにある通り「google_adsense.html」にしたよ。ファイルの中身はこんな感じ…<br/>
 
<li>適当なhtmlファイルを作成して、アドセンスのコードを貼り付けてね。僕は参考サイトにある通り「google_adsense.html」にしたよ。ファイルの中身はこんな感じ…<br/>
 
(「xxxx」は伏せ字だよ。ちゃんとしたコードはアドセンスから取得してね)
 
(「xxxx」は伏せ字だよ。ちゃんとしたコードはアドセンスから取得してね)
<source lang="html5">
+
<syntaxhighlight lang="html5">
 
<script async src="xxxx"></script>
 
<script async src="xxxx"></script>
 
<!-- ビッグバナー_728_90 -->
 
<!-- ビッグバナー_728_90 -->
52行目: 52行目:
 
(adsbygoogle = window.adsbygoogle || []).push({});
 
(adsbygoogle = window.adsbygoogle || []).push({});
 
</script>
 
</script>
</source>
+
</syntaxhighlight>
 
文字コードと改行文字は、僕の場合「UTF-8」の「LF」のみにしたよ。
 
文字コードと改行文字は、僕の場合「UTF-8」の「LF」のみにしたよ。
 
</li>
 
</li>
66行目: 66行目:
 
<li>「編集」タブをクリックして、編集モードにしてね。</li>
 
<li>「編集」タブをクリックして、編集モードにしてね。</li>
 
<li>以下の文を入力して「ページを保存」ボタンをクリックしてね。(ページに最初から設定されている「-」(ハイフン)は消しちゃっても大丈夫だよ)
 
<li>以下の文を入力して「ページを保存」ボタンをクリックしてね。(ページに最初から設定されている「-」(ハイフン)は消しちゃっても大丈夫だよ)
<pre>
+
<syntaxhighlight lang="html">
 
<htmlet>google_adsense</htmlet>
 
<htmlet>google_adsense</htmlet>
</pre>
+
</syntaxhighlight>
 
<nowiki><htmlet></nowiki>タグの中身は、たぶんファイル名の「.html」を除いた部分だよ。
 
<nowiki><htmlet></nowiki>タグの中身は、たぶんファイル名の「.html」を除いた部分だよ。
 
</li>
 
</li>
79行目: 79行目:
 
<ol>
 
<ol>
 
<li>下記のファイルを、エディターなどで開いてね。
 
<li>下記のファイルを、エディターなどで開いてね。
<pre>
+
<syntaxhighlight lang="text">
 
【MediaWikiをインストールしたディレクトリ】/skins/Vector.php
 
【MediaWikiをインストールしたディレクトリ】/skins/Vector.php
</pre>
+
</syntaxhighlight>
 
</li>
 
</li>
 
<li>ファイルの中から以下の部分を検索してね。(ちなみに僕のMediaWikiのバージョンでは200行目付近だったよ)
 
<li>ファイルの中から以下の部分を検索してね。(ちなみに僕のMediaWikiのバージョンでは200行目付近だったよ)
<source lang="php">
+
<syntaxhighlight lang="html">
 
<?php if ( $this->data['catlinks'] ) { ?>
 
<?php if ( $this->data['catlinks'] ) { ?>
 
<?php $this->html( 'catlinks' ); ?>
 
<?php $this->html( 'catlinks' ); ?>
103行目: 103行目:
 
</div>
 
</div>
 
<div id="right-navigation">
 
<div id="right-navigation">
</source>
+
</syntaxhighlight>
 
言葉で表すなら…「<nowiki><div id="bodyContent"></nowiki>」の閉じタグを探してね。
 
言葉で表すなら…「<nowiki><div id="bodyContent"></nowiki>」の閉じタグを探してね。
 
</li>
 
</li>
 
<li>前出のソースを以下の様に修正するよ。(「xxxx」は伏字だからアドセンスからちゃんと取得してね)
 
<li>前出のソースを以下の様に修正するよ。(「xxxx」は伏字だからアドセンスからちゃんと取得してね)
<source lang="php">
+
<syntaxhighlight lang="html" highlight="10-19">
 
<?php if ( $this->data['catlinks'] ) { ?>
 
<?php if ( $this->data['catlinks'] ) { ?>
 
<?php $this->html( 'catlinks' ); ?>
 
<?php $this->html( 'catlinks' ); ?>
136行目: 136行目:
 
</div>
 
</div>
 
<div id="right-navigation">
 
<div id="right-navigation">
</source>
+
</syntaxhighlight>
 
言葉で表すなら…「<nowiki><div id="bodyContent"></nowiki>」の閉じタグの後ろに、アドセンスのコードを埋め込むんだよ。
 
言葉で表すなら…「<nowiki><div id="bodyContent"></nowiki>」の閉じタグの後ろに、アドセンスのコードを埋め込むんだよ。
 
</li>
 
</li>

2019年7月26日 (金) 17:11時点における最新版

MediaWikiにGoogle AdSenseを使って、広告を追加してみたよ。
僕的にページの上部に「ビッグバナー」タイプを、ページの下部に「レクタングル(大)」を追加したかったので、それぞれのやり方について説明するよ。Google AdSenseのやり方はインターネットを検索するとゴロゴロ引っかかるので、そちらを参考にしてね。

JavaScriptを動作できるようにする

Google AdSenseの追加コードをよく見てみると分かるけど、AdSenseのコードはJavaScriptを使っているんだよ。MediaWikiのページにこのコードを貼り付けても動作しないので、MediaWikiにHTMLetsプラグインを導入して、JavaScriptを動作できるようにする必要があるんだ。
以下のHTMLetsのページを参考に導入してみるよ。

Extension:HTMLets/ja

  1. コンソールアプリケーションなどを使って、サーバーにログインしてね。
  2. 以下のコマンドを実行して、「HTMLets」を展開するよ。
    git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/HTMLets.git
    
  3. LocalSettings.phpの最後に以下の行を追加してね。
    require_once "$IP/extensions/HTMLets/HTMLets.php";
    $wgHTMLetsDirectory = "$IP/htmlets";
    

    「$wgHTMLetsDirectory」はJavaScriptのソースを置く場所になるよ。好きなところに変更しても良いかもね。

  4. 手前の手順で「$wgHTMLetsDirectory」に設定したパスにディレクトリを作成するよ。コマンドは以下の通りだよ。
    mkdir [作成したいディレクトリ名]
    

    「$wgHTMLetsDirectory = "$IP/htmlets";」と設定した場合は以下の様になるよ。

    MediaWikiをインストールしたディレクトリで…
    mkdir htmlets
    

これで、JavaScriptを動作させる準備ができたよ。これからの説明は、上記の通りインストールしたことを前提に進めるね。

ページの上部にアドセンスを追加する

手順として、「アドセンスのコードを埋め込んだファイルを作成」「MediaWiki:Sitenoticeを編集」って感じで進めるよ。

アドセンスのコードを埋め込んだファイルを作成

アドセンスのコードを埋め込んだファイルを準備してHTMLetsのフォルダに格納するよ。

  1. 適当なhtmlファイルを作成して、アドセンスのコードを貼り付けてね。僕は参考サイトにある通り「google_adsense.html」にしたよ。ファイルの中身はこんな感じ…
    (「xxxx」は伏せ字だよ。ちゃんとしたコードはアドセンスから取得してね)
    <script async src="xxxx"></script>
    <!-- ビッグバナー_728_90 -->
    <ins class="xxxx"
         style="display:inline-block;width:728px;height:90px"
         data-ad-client="xxxx"
         data-ad-slot="xxxx"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    

    文字コードと改行文字は、僕の場合「UTF-8」の「LF」のみにしたよ。

  2. 前出のHTMLetsの「$wgHTMLetsDirectory」のディレクトリにFTP等を使ってアップロードしてね。

MediaWiki:Sitenoticeを編集

「MediaWiki:Sitenotice」はMediaWikiの雛形的ページなんだよ。このページを編集すると、すべてのページに反映されるんだ。
このページを使って、前出の「google_sdsense.html」を呼び出す用に編集するよ。

  1. MediaWikiの画面の右上の検索ボックスに「MediaWiki:Sitenotice」って入れて検索してね。「MediaWiki:Sitenotice」ってページが表示されるよ。
  2. 「編集」タブをクリックして、編集モードにしてね。
  3. 以下の文を入力して「ページを保存」ボタンをクリックしてね。(ページに最初から設定されている「-」(ハイフン)は消しちゃっても大丈夫だよ)
    <htmlet>google_adsense</htmlet>
    

    <htmlet>タグの中身は、たぶんファイル名の「.html」を除いた部分だよ。

  4. 他のページを参照して確認してね。

ページ下部にアドセンスを追加する

ページの下部にアドセンスを追加するためには、MediaWikiのソースを変更する必要があるんだよ。だから、自己責任で試してみてね。

  1. 下記のファイルを、エディターなどで開いてね。
    【MediaWikiをインストールしたディレクトリ】/skins/Vector.php
    
  2. ファイルの中から以下の部分を検索してね。(ちなみに僕のMediaWikiのバージョンでは200行目付近だったよ)
    		<?php if ( $this->data['catlinks'] ) { ?>
    		<?php $this->html( 'catlinks' ); ?>
    		<?php } ?>
    		<?php if ( $this->data['dataAfterContent'] ) { ?>
    		<?php $this->html( 'dataAfterContent' ); ?>
    		<?php } ?>
    		<div class="visualClear"></div>
    		<?php $this->html( 'debughtml' ); ?>
    	</div>
    </div>
    <div id="mw-navigation">
    	<h2><?php $this->msg( 'navigation-heading' ) ?></h2>
    	<div id="mw-head">
    		<?php $this->renderNavigation( 'PERSONAL' ); ?>
    		<div id="left-navigation">
    			<?php $this->renderNavigation( array( 'NAMESPACES', 'VARIANTS' ) ); ?>
    		</div>
    		<div id="right-navigation">
    

    言葉で表すなら…「<div id="bodyContent">」の閉じタグを探してね。

  3. 前出のソースを以下の様に修正するよ。(「xxxx」は伏字だからアドセンスからちゃんと取得してね)
    		<?php if ( $this->data['catlinks'] ) { ?>
    		<?php $this->html( 'catlinks' ); ?>
    		<?php } ?>
    		<?php if ( $this->data['dataAfterContent'] ) { ?>
    		<?php $this->html( 'dataAfterContent' ); ?>
    		<?php } ?>
    		<div class="visualClear"></div>
    		<?php $this->html( 'debughtml' ); ?>
    	</div>
    	<br/>
    	<script async src="xxxx"></script>
    		<!-- AdSense_300_250 -->
    		<ins class="xxxx"
    		     style="display:inline-block;width:300px;height:250px"
    		     data-ad-client="xxxx"
    		     data-ad-slot="xxxx"></ins>
    		<script>
    		(adsbygoogle = window.adsbygoogle || []).push({});
    	</script>
    </div>
    <div id="mw-navigation">
    	<h2><?php $this->msg( 'navigation-heading' ) ?></h2>
    	<div id="mw-head">
    		<?php $this->renderNavigation( 'PERSONAL' ); ?>
    		<div id="left-navigation">
    			<?php $this->renderNavigation( array( 'NAMESPACES', 'VARIANTS' ) ); ?>
    		</div>
    		<div id="right-navigation">
    

    言葉で表すなら…「<div id="bodyContent">」の閉じタグの後ろに、アドセンスのコードを埋め込むんだよ。

  4. 保存して、アドセンスが表示されているかページを確認してみてね

参考サイト

dococo - MediaWiki - MediaWikiでアフェリエイト