PixelPostの為のカスタマイズ
外国の写真ブログなどでよく使われているpixelpostを少しインストールして弄ってみました。
データベースのMySQLを使うので、データベースのが1個しか使えないロリポップのサーバーには設置せず、た試しにXREAのサーバーでインストールしてみました。
以下は、設置と少しカスタマイズした為の忘備録です。
XREAにインストールしたpixelpost
無料なので上にXREAの広告がありますが、なかなかいいですね。
これに掲載できるような写真がいろいろあれば設置してもおいいかなと思っていますが・・・。
いまは同じロリポップのサーバーにインストール出来ないのがちょっとネックになっています。
インストール方法：
簡単なので以下のページで十分です。
pixelpost installation
インストール（日本語）
ちょっと順番が逆ですが・・・。
Addonの活性化と追加：
スパムコントロール
Pixelpost DefensioデフォルトでインストールされているアドオンをONにします。
2つアドオンがあるので2つともONにします。
その後、DEFENSIOのサイトに登録してAPIキーを取得。
オプション→スパムコントロールで表示されるページの「Defensio API Key」という部分に上記のAPIキーを登録して作業完了。
テンプレート
デフォルトで付いてくるテンプレートは、「Horizon」「simple」しかないので、pixelpostのサイトに行ってテンプレートをDLしてきます。
テンプレートのインストールは、
addonフォルダーに**.phpファイルをコピー
Templatesフォルダーに、DLしてきたファイルを解凍してできたテンプレートフォルダーをコピー
して完了です。
その後管理画面から好みのテンプレートを指定して終わりです。
細かいところをカスタマイズしたい場合は、DLしたファイルのhtmlファイルやcssファイルを変更します。
テンプレートThe World in 35mmにstyleswitcher.jsを適用
pixelpostには、よくstyleswitcher.jsを使ってデザインを変えられるようになっているサイト/テンプレートが多いです。白ベースと黒ベースのcssをスイッチするというのが多いみたいです。
テンプレートThe World in 35mmは好きなデザインなのですが、これにスタイルが変えられるようにカスタマイズしました。
意外と簡単に出来たのでこのMTも、近々同じようにデザインが変えられるようにしたいと思います。
JavaScript Library Archive：スタイルシートを切り替える「styleswitcher.js」
MTの場合のカスタマイズ方法は、
小粋空間: スタイルシート切り替え
header.html変更内容：
赤色の部分が、追加部分。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><35MM_TITLE></title>
<base href="<SITE_URL>" />
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="<35MM_META_KEYWORDS>" />
<meta name="description" content="<35MM_META_DESCRIPTION>" />
<meta name="copyright" content="<35MM_COPYRIGHT>" />
<meta name="author" content="<35MM_AUTHOR>" />
<meta name="owner" content="<35MM_AUTHOR>" />
<meta name="publisher" content="<35MM_AUTHOR>" />
<meta name="version" content="v2.7.1, <35MM_VERSION>" />
<35MM_GOOGLEWEBMASTER>
<35MM_PREFETCH_LINKS>
<FEED_AUTO_DISCOVERY>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" type="text/css" media="all" href="templates/theworldin35mm/css/theworldin35mm.css" charset="utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="<35MM_CSS_URL>" charset="utf-8" />
<link rel="alternate stylesheet" type="text/css" href="templates/theworldin35mm/themes/light.css" title="light" />
<link rel="alternate stylesheet" type="text/css" href="templates/theworldin35mm/themes/dark.css" title="dark" />
<!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="templates/theworldin35mm/css/theworldin35mm-ie.css" charset="utf-8" /><![endif]-->
<35MM_FACEBOOK_LINK>
<script type="text/javascript" src="templates/theworldin35mm/styleswitcher.js"></script>
</head>
<body>
<div id="royal-wrapper" style="width: <35MM_ROYALWIDTH>px;">
<div id="wrapper" style="width: <35MM_WIDTH>px;">
<div id="header">
<div id="site-title"><a href="<SITE_URL>"><SITE_TITLE></a></div><div id="menu">
<ul>
<li><a href="<SITE_URL>" title="Latest Photo">Latest</a></li>
<li>·</li>
<li><a href="<35MM_BROWSE_URL>" title="Browse Photo Archive">Browse</a></li>
<li>·</li>
<li><a href="<35MM_URLPREFIX_PAGE>about" title="About">About</a></li>
</ul>
<div id="sub-title"><SUB_TITLE></div>
</div><div class="clear"></div>
</div>
footer.html変更内容：
赤色の部分が、追加部分。
<div id="footer">
<35MM_COPYRIGHT_FOR_FOOTER><br />
<ul>
<li>Powered by <a onclick="window.open(this.href); return false;" href="http://pixelpost.org/" title="Pixelpost">Pixelpost</a></li>
<li>·</li>
<li>Theme by <a onclick="window.open(this.href); return false;" href="http://theworldin35mm.org/">The World in 35mm</a></li>
<li>·</li>
<li>SELECT STYLE : <a href="#" class="style" onclick="setActiveStyleSheet('light'); return false;">Light</a> | <a href="#" class="style" onclick="setActiveStyleSheet('dark'); return false;">Dark</a><li>
<li>·</li>
<li><a onclick="window.open(this.href); return false;" href="admin">Admin</a></li>
</ul>
</div>
</div> <!-- id=wrapper -->
</div> <!-- id=royal-wrapper -->
<35MM_GOOGLEANALYTICS>
</body>
</html>
コメントする