2017/12/14 16:48 JST

Geeklog 2アップグレードとカスタマイズ方法

Announcements

 本サイトとDEMO サイトをGeeklog 2.0.0 RC1にアップグレードしました。特に、本サイトのカスタマイズ内容を紹介します。

Custommenu plugin

メニューは、日本語拡張版で同梱している、カスタムメニュープラグイン(custommenu)を活用しています。Themeに//layout/*theme*custommenu/ディレクトリが追加されています。

Custommenuは、Nightly buildに最新版があります。

Theme Denim

テーマは、レスポンシブWEBデザインのDenimです。
様々なブラウザの幅に応じたスタイルを提供。幅を狭めると、ヘッダのメニューはプルダウンに変わります。

Japanize

なお、日本語化のためには、日本語化プラグインのインストールと一括実行。
URLリライトは、コンフィギュレーションで「はい」に設定。
これはかならずインストール後に行なってください。

Theme

Geeklog 2.0.0から、テーマのfunctions.phpが大きく変わります。
*****_テーマ名() の関数がセットされていますので、テーマのディレクトリ名を変更したら、かならずfunctions.phpを編集して関数名をすべて置換してください。
また、functions.phpでDoctypeを指定しています。現在のバージョンではGeeklogのコンフィギュレーションの指定が無効になっていますのでその点、注意してください。

Social Button

本サイトではテーマDenimのstorytext.thtml, featurestorytext.thtmlに、以下を追加しています。本サイトではテーマDenimのstorytext.thtml, featurestorytext.thtmlに、以下を追加しています。


<div style="clear:both" class="topsy_widget_data"><a href="http://twitter.com/share" class="twitter-share-button" data-url="{site_url}/article.php/{story_id}" data-text="[Geeklogjp]{story_title} #geeklogjp" data-count="horizontal" data-lang="ja">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>  <g:plusone href="{site_url}/article.php/{story_id}"></g:plusone></div>

また、article/article.thtml には、、Assist pluginをインストールして、以下の自動タグを追加してSocial buttonを追加しています。Facebook Appli ID セット要


<div style="float:left; width:100px; margin-left:1em;">[assist:btn type:fblikebtn]</div>
<div style="float:left; width:60px; margin-left:1em;">[assist:btn type:evclip]</div>
<div style="float:left; width:100px; margin-left:1em;">[assist:btn type:tweet]</div>
<div style="float:left; width:100px; margin-left:1em;">[assist:btn type:plusone]</div>
<div style="clear:both">[assist:btn type:fbcomment]</div>

CSS Style

リンクがはられた画像のスタイルには以下のスタイルを/layout/denim/css_ltr/style.css に追加しています。

a:hover img {
     filter:alpha(opacity=50);
      -moz-opacity: 0.5;
      opacity: 0.5;
  }

この記事で利用しているcode表示や制作事例の画像のlightboxは、jQueryプラグインを活用して自動タグで表示しています。

Japanize Theme

テーマの日本語化は以下を作業しています。
custommenuプラグインで2階層メニュー対応のためテンプレートの追加。
header.thtml テーマ変数 {lang_attribute}を{html_attribute}
header.thtml テーマ変数{welcome_msg}を{welcome_msg_jp}

css textareaに、"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "MS Pゴシック", Verdana, Arial, Helvetica, sans-serif;
追加。(MACのformで日本語文字化け対策)

Downloads Plugin and Assist Plugin

/public_html/downloads/templates/filedetail.thtml
ソーシャル用Autotags by Assist Plugin

<!-- Social button { --></p>
<div style="float:left; width:100px">[assist:btn type:fblikebtn]</div>
<div style="float:left; width:100px">[assist:btn type:tweet]</div>
<div style="float:left; width:100px">[assist:btn type:evclip]</div>
<div style="clear:both">&nbsp;</div>
<p>[assist:btn type:fbcomment] <!-- } Social button -->

ユーザー写真 Profile photo style

style.cssに以下を追加。

.userphoto {
   width: 80px;
   height: 80px;
   border: none;
   border-radius: 6px;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   -o-border-radius: 6px;
   -opera-border-radius: 6px;
 }

お問い合わせformmailのtable tagをSmart device向けにlist表示させる

以下をstyle.cssに追加しました。


@media only screen and (max-width:480px){
    #FORM table.formmail tbody tr{
        display: block;
        margin-bottom: 1em;
	list-style: none;
    }
    #FORM table.formmail tbody th,
    #FORM table.formmail tbody td{
        display: list-item;
        border: none;
	width: 90%;
    }
}

参考: http://design-spice.com/2012/11/01/responsive-table/

Configuration

URL rewrite: ON

User - Facebook Apli ID and secret for Assist Plugin's OGP
Assistプラグインが出力するOGPタグのためにFacebook Apliを取得してセットしてください。

jQuery

Note

サブドメインにインストールする際には、レスキューツールで、クッキードメインを、フルドメインを設定しておく必要がありますので、忘れないようにしましょう。