MediaWikiにGoogle AdSenseを追加してみたのソースを表示

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

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

[http://www.mediawiki.org/wiki/Extension:HTMLets/ja Extension:HTMLets/ja]

<ol>
<li>コンソールアプリケーションなどを使って、サーバーにログインしてね。</li>
<li>以下のコマンドを実行して、「HTMLets」を展開するよ。
<syntaxhighlight lang="bash">
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/HTMLets.git
</syntaxhighlight>
</li>
<li>LocalSettings.phpの最後に以下の行を追加してね。
<syntaxhighlight lang="php">
require_once "$IP/extensions/HTMLets/HTMLets.php";
$wgHTMLetsDirectory = "$IP/htmlets";
</syntaxhighlight>
「$wgHTMLetsDirectory」はJavaScriptのソースを置く場所になるよ。好きなところに変更しても良いかもね。
</li>
<li>手前の手順で「$wgHTMLetsDirectory」に設定したパスにディレクトリを作成するよ。コマンドは以下の通りだよ。
<syntaxhighlight lang="bash">
mkdir [作成したいディレクトリ名]
</syntaxhighlight>
「$wgHTMLetsDirectory = "$IP/htmlets";」と設定した場合は以下の様になるよ。
<syntaxhighlight lang="bash">
MediaWikiをインストールしたディレクトリで…
mkdir htmlets
</syntaxhighlight>
</li>
</ol>
これで、JavaScriptを動作させる準備ができたよ。これからの説明は、上記の通りインストールしたことを前提に進めるね。

== ページの上部にアドセンスを追加する ==
手順として、「アドセンスのコードを埋め込んだファイルを作成」「MediaWiki:Sitenoticeを編集」って感じで進めるよ。
=== アドセンスのコードを埋め込んだファイルを作成 ===
アドセンスのコードを埋め込んだファイルを準備してHTMLetsのフォルダに格納するよ。
<ol>
<li>適当なhtmlファイルを作成して、アドセンスのコードを貼り付けてね。僕は参考サイトにある通り「google_adsense.html」にしたよ。ファイルの中身はこんな感じ…<br/>
（「xxxx」は伏せ字だよ。ちゃんとしたコードはアドセンスから取得してね）
<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>
文字コードと改行文字は、僕の場合「UTF-8」の「LF」のみにしたよ。
</li>
<li>前出のHTMLetsの「$wgHTMLetsDirectory」のディレクトリにFTP等を使ってアップロードしてね。</li>
</ol>

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

<ol>
<li>MediaWikiの画面の右上の検索ボックスに「MediaWiki:Sitenotice」って入れて検索してね。「MediaWiki:Sitenotice」ってページが表示されるよ。</li>
<li>「編集」タブをクリックして、編集モードにしてね。</li>
<li>以下の文を入力して「ページを保存」ボタンをクリックしてね。（ページに最初から設定されている「-」（ハイフン）は消しちゃっても大丈夫だよ）
<syntaxhighlight lang="html">
<htmlet>google_adsense</htmlet>
</syntaxhighlight>
<nowiki><htmlet></nowiki>タグの中身は、たぶんファイル名の「.html」を除いた部分だよ。
</li>
<li>他のページを参照して確認してね。</li>
</ol>

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

<ol>
<li>下記のファイルを、エディターなどで開いてね。
<syntaxhighlight lang="text">
【MediaWikiをインストールしたディレクトリ】/skins/Vector.php
</syntaxhighlight>
</li>
<li>ファイルの中から以下の部分を検索してね。（ちなみに僕のMediaWikiのバージョンでは200行目付近だったよ）
<syntaxhighlight lang="html">
		<?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">
</syntaxhighlight>
言葉で表すなら…「<nowiki><div id="bodyContent"></nowiki>」の閉じタグを探してね。
</li>
<li>前出のソースを以下の様に修正するよ。（「xxxx」は伏字だからアドセンスからちゃんと取得してね）
<syntaxhighlight lang="html" highlight="10-19">
		<?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">
</syntaxhighlight>
言葉で表すなら…「<nowiki><div id="bodyContent"></nowiki>」の閉じタグの後ろに、アドセンスのコードを埋め込むんだよ。
</li>
<li>保存して、アドセンスが表示されているかページを確認してみてね</li>
</ol>

== 参考サイト ==
[http://dococo.jp/index.php?title=MediaWiki#MediaWiki.E3.81.A7.E3.82.A2.E3.83.95.E3.82.A7.E3.83.AA.E3.82.A8.E3.82.A4.E3.83.88 dococo - MediaWiki - MediaWikiでアフェリエイト]

[[Category:MediaWiki]]
[[Category:Google]]