701
回編集
差分
ナビゲーションに移動
検索に移動
ページの作成:「MediaWikiにOGPのメタタグを追加してみるよ。僕が使っているMediaWikiのバージョンから最新はだいぶアップデートされているみた…」
MediaWikiにOGPのメタタグを追加してみるよ。僕が使っているMediaWikiのバージョンから最新はだいぶアップデートされているみたいなので…Ver.1.22.6をベースに話を進めるよ。ちなみに今回設定したOGPは以下のプロパティを設定したよ。
<ul>
<li><strong>og:type</strong><br/>トップページなら「website」そのほかは「article」で設定。</li>
<li><strong>og:title</strong><br/>ページのタイトル。</li>
<li><strong>og:url</strong><br/>トップページのＵＲＬ。</li>
<li><strong>og:site_name</strong><br/>サイトの名称。このサイトなら「Rin Knowledge Database」。</li>
<li><strong>og:image</strong><br/>サイトアイコン（イメージ）へのURL。（facebookのことを考えて200px以上のイメージ）</li>
</ul>
== Vector.phpの編集 ==
きっと、うまくやればExtensionでできるんだろうけど…と思ってみて探しに探したけど、良い感じのExtensionが見つからなかったんだ。しかも、Extensionを作れる自信がないので、いっそのことって事で「Vector.php」を直接編集したんだ。
<ol>
<li>以下のディレクトリのVector.phpをさがす。<br/>
<pre>【Mediawikiをインストールしたディレクトリ】/skins/Vector.php</pre></li>
<li>FTPのソフトなどを使ってダウンロードする。（直接編集できる人はこの手順は必要ないよ）</li>
<li>エディタなどでファイルを開く。（さまざまな文字コードに対応したエディタを使ってね）</li>
<li>以下の部分を探してね。（「SkinVector」クラスの「initPage」メソッドだよ。）
<source lang="php">
public function initPage( OutputPage $out ) {
global $wgLocalStylePath;
parent::initPage( $out );
// Append CSS which includes IE only behavior fixes for hover support -
// this is better than including this in a CSS file since it doesn't
// wait for the CSS file to load before fetching the HTC file.
$min = $this->getRequest()->getFuzzyBool( 'debug' ) ? '' : '.min';
$out->addHeadItem( 'csshover',
'<!--[if lt IE 7]><style type="text/css">body{behavior:url("' .
htmlspecialchars( $wgLocalStylePath ) .
"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
);
$out->addModules( array( 'skins.vector.js', 'skins.vector.collapsibleNav' ) );
}
</source>
</li>
<li>上記のソースを以下のように修正してね。
<source lang="php">
public function initPage( OutputPage $out ) {
global $wgLocalStylePath;
parent::initPage( $out );
// Append CSS which includes IE only behavior fixes for hover support -
// this is better than including this in a CSS file since it doesn't
// wait for the CSS file to load before fetching the HTC file.
$min = $this->getRequest()->getFuzzyBool( 'debug' ) ? '' : '.min';
$out->addHeadItem( 'csshover',
'<!--[if lt IE 7]><style type="text/css">body{behavior:url("' .
htmlspecialchars( $wgLocalStylePath ) .
"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
);
/* OGPtag ここから追加 */
if(strcmp($out->getPageTitle(), 'メインページ') == 0)
{
$out->addHeadItem('og:type','<meta property="og:type" content="website">');
}
else
{
$out->addHeadItem('og:type','<meta property="og:type" content="article">');
}
$out->addHeadItem('og:title', '<meta property="og:title" content="' . $out->getPageTitle() . '">');
$out->addHeadItem('og:url', '<meta property="og:url" content="http://rinknowledge.com/">');
$out->addHeadItem('og:site_name', '<meta property="og:site_name" content="Rin Knowledge Database">');
$out->addHeadItem('og:image', '<meta property="og:image" content="http://rinknowledge.com/images/c/c2/Logo_200_200.png">');
/* OGPtag ここまで */
$out->addModules( array( 'skins.vector.js', 'skins.vector.collapsibleNav' ) );
}
</source>
</li>
<li>文字コードをUTF-8にして保存してね…<br/>
僕はUTF-8で保存しないと、追加したIF文が機能しなかったんだよ…。もしかしたら他に解決方法があるかもしれないよ…</li>
<li>ファイルを元の場所にアップロードしてね。（直接編集している人は必要ないよ）</li>
<li>サイトのページを開いて、OGP用のメタタグがついていることを確認してね。</li>
</ol>
== 参考サイト ==
[http://meta.sakurataro.org/page/MediaWiki%E3%81%ABmeta%E3%82%BF%E3%82%B0%E3%81%AE%E8%BF%BD%E5%8A%A0 MediaWikiにmetaタグの追加 - サクラタロウmeta]<br/>
[http://webkaihatu.blogspot.jp/2012/01/windows.html Windows環境でのPHPの文字化け対策 | web開発日報]<br/>
[http://www.mediawiki.org/wiki/Extension:Advanced_Meta Extension:Advanced Meta - MediaWiki] … テーブルを作るので却下<br/>
[http://www.mediawiki.org/wiki/Extension:MetaTags Extension:MetaTags - MediaWiki] … MediaWikiのバージョンミスマッチで動かなかった…<br/>
[http://www.mediawiki.org/wiki/Extension:Add_HTML_Meta_and_Title Extension:Add HTML Meta and Title - MediaWiki] … titleタグをいじる理由が良くわからなかったので却下<br/>
[http://www.mediawiki.org/wiki/Extension:WikiSEO Extension:WikiSEO - MediaWiki] … ページ毎にタグ（またはテンプレート）を設定しないとだめらしいので却下（「MediaWiki:Sitenotice」に追加してみたけど…コメントアウトされた…）
[[Category:MediaWiki]]
[[Category:OGP]]
<ul>
<li><strong>og:type</strong><br/>トップページなら「website」そのほかは「article」で設定。</li>
<li><strong>og:title</strong><br/>ページのタイトル。</li>
<li><strong>og:url</strong><br/>トップページのＵＲＬ。</li>
<li><strong>og:site_name</strong><br/>サイトの名称。このサイトなら「Rin Knowledge Database」。</li>
<li><strong>og:image</strong><br/>サイトアイコン（イメージ）へのURL。（facebookのことを考えて200px以上のイメージ）</li>
</ul>
== Vector.phpの編集 ==
きっと、うまくやればExtensionでできるんだろうけど…と思ってみて探しに探したけど、良い感じのExtensionが見つからなかったんだ。しかも、Extensionを作れる自信がないので、いっそのことって事で「Vector.php」を直接編集したんだ。
<ol>
<li>以下のディレクトリのVector.phpをさがす。<br/>
<pre>【Mediawikiをインストールしたディレクトリ】/skins/Vector.php</pre></li>
<li>FTPのソフトなどを使ってダウンロードする。（直接編集できる人はこの手順は必要ないよ）</li>
<li>エディタなどでファイルを開く。（さまざまな文字コードに対応したエディタを使ってね）</li>
<li>以下の部分を探してね。（「SkinVector」クラスの「initPage」メソッドだよ。）
<source lang="php">
public function initPage( OutputPage $out ) {
global $wgLocalStylePath;
parent::initPage( $out );
// Append CSS which includes IE only behavior fixes for hover support -
// this is better than including this in a CSS file since it doesn't
// wait for the CSS file to load before fetching the HTC file.
$min = $this->getRequest()->getFuzzyBool( 'debug' ) ? '' : '.min';
$out->addHeadItem( 'csshover',
'<!--[if lt IE 7]><style type="text/css">body{behavior:url("' .
htmlspecialchars( $wgLocalStylePath ) .
"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
);
$out->addModules( array( 'skins.vector.js', 'skins.vector.collapsibleNav' ) );
}
</source>
</li>
<li>上記のソースを以下のように修正してね。
<source lang="php">
public function initPage( OutputPage $out ) {
global $wgLocalStylePath;
parent::initPage( $out );
// Append CSS which includes IE only behavior fixes for hover support -
// this is better than including this in a CSS file since it doesn't
// wait for the CSS file to load before fetching the HTC file.
$min = $this->getRequest()->getFuzzyBool( 'debug' ) ? '' : '.min';
$out->addHeadItem( 'csshover',
'<!--[if lt IE 7]><style type="text/css">body{behavior:url("' .
htmlspecialchars( $wgLocalStylePath ) .
"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
);
/* OGPtag ここから追加 */
if(strcmp($out->getPageTitle(), 'メインページ') == 0)
{
$out->addHeadItem('og:type','<meta property="og:type" content="website">');
}
else
{
$out->addHeadItem('og:type','<meta property="og:type" content="article">');
}
$out->addHeadItem('og:title', '<meta property="og:title" content="' . $out->getPageTitle() . '">');
$out->addHeadItem('og:url', '<meta property="og:url" content="http://rinknowledge.com/">');
$out->addHeadItem('og:site_name', '<meta property="og:site_name" content="Rin Knowledge Database">');
$out->addHeadItem('og:image', '<meta property="og:image" content="http://rinknowledge.com/images/c/c2/Logo_200_200.png">');
/* OGPtag ここまで */
$out->addModules( array( 'skins.vector.js', 'skins.vector.collapsibleNav' ) );
}
</source>
</li>
<li>文字コードをUTF-8にして保存してね…<br/>
僕はUTF-8で保存しないと、追加したIF文が機能しなかったんだよ…。もしかしたら他に解決方法があるかもしれないよ…</li>
<li>ファイルを元の場所にアップロードしてね。（直接編集している人は必要ないよ）</li>
<li>サイトのページを開いて、OGP用のメタタグがついていることを確認してね。</li>
</ol>
== 参考サイト ==
[http://meta.sakurataro.org/page/MediaWiki%E3%81%ABmeta%E3%82%BF%E3%82%B0%E3%81%AE%E8%BF%BD%E5%8A%A0 MediaWikiにmetaタグの追加 - サクラタロウmeta]<br/>
[http://webkaihatu.blogspot.jp/2012/01/windows.html Windows環境でのPHPの文字化け対策 | web開発日報]<br/>
[http://www.mediawiki.org/wiki/Extension:Advanced_Meta Extension:Advanced Meta - MediaWiki] … テーブルを作るので却下<br/>
[http://www.mediawiki.org/wiki/Extension:MetaTags Extension:MetaTags - MediaWiki] … MediaWikiのバージョンミスマッチで動かなかった…<br/>
[http://www.mediawiki.org/wiki/Extension:Add_HTML_Meta_and_Title Extension:Add HTML Meta and Title - MediaWiki] … titleタグをいじる理由が良くわからなかったので却下<br/>
[http://www.mediawiki.org/wiki/Extension:WikiSEO Extension:WikiSEO - MediaWiki] … ページ毎にタグ（またはテンプレート）を設定しないとだめらしいので却下（「MediaWiki:Sitenotice」に追加してみたけど…コメントアウトされた…）
[[Category:MediaWiki]]
[[Category:OGP]]
