CMS Geeklog開発周辺覚書

 Thursday, November 21 2024 @ 04:19 PM JST

HTML5 のテーマのhtml属性とhead属性他

  • Wednesday, May 06 2015 @ 09:28 PM JST
  • 投稿者:
  • 表示回数 3,244
Geeklog

GeeklogでHTML5テーマを開発する場合に、注意する点は以下です。

1.functions.phpでHTML5を宣言

１．functions.phpのfunction theme_config_テーマ名()を以下のように修正してください。コンフィギュレーションのテーマでのDOCTYPE宣言よりこちらを優先します。

function theme_config_テーマ名()
{
    return array(
        'image_type' => 'png',
        'doctype' => 'xhtml5',
        'etag' => true,
        'supported_version_theme' => '2.1.0' 
    );
}

2. header.thtml

HTML5では、html タグは、xlmns属性が不要になりました。 
{doctype}
<html{html_attribute}>
<head>
なお、本家版は{lang_attribute}です。{html_attribute}は日本語版のみが提供するテーマ変数です。 
{doctype}
<html{lang_attribute}{xmlns}>
<head>
以下HTML5ではデフォルトとなるため不要です。 
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">

PDFを自動展開するgDocsViewerをGeeklogで活用する方法

  • Sunday, April 26 2015 @ 11:26 AM JST
  • 投稿者:
  • 表示回数 4,166
Geeklog

リンク先のPDFファイルを、Google Docs Viewerでその場で閲覧できる様にするjQueryプラグイン・gDocsViewer(ライセンスMIT)をGeeklogで活用する方法を紹介します。

gdocsviewerをダウンロードして/vendor/gdocsviewer/以下にアップロードします。

footer.thtmlに追加:

<!-- PDF { -->
<script type="text/javascript" src="{site_url}/vendor/gdocsviewer/jquery.gdocsviewer.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
  $('a.embed-large').gdocsViewer({width: 900, height: 600});
  $('a.embed-medium').gdocsViewer({width: 500, height: 500});
  $('a.embed-small').gdocsViewer({width: 300, height: 240});
  $('#embedURL').gdocsViewer();
});
/*]]>*/
</script>
<!-- } PDF -->

コンテンツ表示部に自動タグを追加:

[pdf:PDFファイル名]

自動タグプラグインで、自動タグpdfを追加する:

自動タグ：pdf　を追加。置換文字列には以下のコードを記述してください。


<div class="uk-margin-top uk-visible-large">
<a class="embed-large" href="#1" target="_blank" style="cursor:default; color: #444"></a> </div>

<div class="uk-margin-top uk-visible-medium">
<a class="embed-medium" href="#1" target="_blank" style="cursor:default; color: #444"></a> </div>

<div class="uk-margin-top uk-visible-small">
<a class="embed-small" href="#1" target="_blank" style="cursor:default; color: #444"></a> </div>

ダウンロード

/blog/archives/394-Google-Docs-Viewer-plugin-for-jQuery.html

事例

http://www.rentpro.co.jp/databox/data.php/0029/code

ウェブサイト翻訳ツール - ウェブサイトをGeeklogサイトに追加する

  • Sunday, April 26 2015 @ 10:56 AM JST
  • 投稿者:
  • 表示回数 4,673
Geeklog

ウェブサイト翻訳ツール - ウェブサイトプラグインをGeeklogサイトに追加する方法を紹介します。

動作はこのページの右上ブロックで確認してください。

ウェブサイト翻訳ツール - ウェブサイトプラグインをGeeklogサイトに追加する方法は、以下のURLからスニペットを取得。

https://translate.google.com/manager/website/add

テーマのheader.thtmlにヘッダー部分を追加して、ブロックや静的ページなどのコンテンツ部に、記述するだけで表示できます。

Mediagallery hackを活用する

  • Friday, April 24 2015 @ 08:55 PM JST
  • 投稿者:
  • 表示回数 3,414
Geeklog

Mediagallery hackを活用すると、メディアギャラリーのコンテンツを作成するだけで、自動タグを使ってコンテンツを展開できます。

活用事例

http://www.ivysoho.com/databox/data.php/ceviche/code

このページを作成するために、メディアギャラリーでアルバムを作成しています。画像を一括アップロードできて、画像のサムネイルを見ながらキャプションと説明を追加できます。

アルバム

http://www.ivysoho.com/mediagallery/album.php?aid=68&page=1

ログインしたときの活用事例のページ

Mediagallery hack ダウンロード

https://bitbucket.org/tsuchi/mediagallery_hack

画像、キャプション、説明を順に展開する自動タグ

[ medialist:(ID) theme:default limitcnt:100]

※[の後にスペースは削除して活用してください。

theme:default は、デフォルトテーマなので省略できます。
defaultのテーマのテンプレートは以下のようになっています。

autotag_medialist.thtml: 
<!-- plugins/mediagallery/templates/medialist/default/autotag_medialist.thtml 20150309 { -->

{!if edit}
<fieldset>
<legend><a href="{site_url}/mediagallery/album.php?aid={album_id}&amp;page=1"><i class="uk-icon-file-image-o"></i> {album_title}</a></legend>
{!endif}

<div>
{medialist_col}
</div>

{!if edit}
</fieldset>
{!endif}

<!-- } plugins/mediagallery/templates/medialist/default/autotag_medialist.thtml -->
autotag_medialist_col.thtml: 
<!-- plugins/mediagallery/templates/medialist/default/autotag_medialist_col.thtml 20150309 { -->

	<div class="uk-margin-large uk-text-center {class}">
		<a href="{filename_disp}" data-uk-lightbox="{ group:'my-group{albumid}' }" title="{media_title}">
			<img src="{filename_disp}" alt="{media_title}" class="uk-container-center uk-overlay-scale uk-border-rounded  {class}"{xhtml}>
			{!if media_title}<div class="uk-text-bold uk-margin-min">{media_title}</div>{!endif}
		</a>
		<div class="uk-text-left uk-margin">{media_desc}</div>
	</div>

<!-- } plugins/mediagallery/templates/medialist/default/autotag_medialist_col.thtml -->

ログインの判定をテンプレートに記述する

  • Thursday, February 26 2015 @ 11:55 AM JST
  • 投稿者:
  • 表示回数 3,528
Geeklog

ログインした時に、bodyタぐ等に特別なIDを当てる方法は、いくつかの方法が用意されています。

[h3:ログイン・非ログインで、bodyタぐ等に特別なIDを当てる方法] [h3:1．Geeklog標準機能のCaching_Template_Libraryを活用する場合] 
<body id="{!if onlyloggedinusers}
  <body id="member">
{!else}
  <body id="guest">
{!endif}

くわしくはWikiをご覧ください。

[h3:2.Geeklog標準機能のテンプレートにPHPを記述する場合] 
<body id="<?php
    if (COM_isAnonUser()){
        echo "guest";
    } else {
        echo "member";
    }
?>">

くわしくはWikiをご覧ください。

[h3:3.Assistプラグイン　自動タグを活用する場合] 
<body id="{!!autotag assit:login_status !!}">

{!!autotag assit:login_status !!}は、 member または guest （言語ファイルで変更可）

Twitter cardを追加する

  • Tuesday, February 24 2015 @ 10:40 PM JST
  • 投稿者:
  • 表示回数 3,503
Geeklog

Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。

https://dev.twitter.com/ja/cards/overview

Geeklogに追加する場合は、Assistプラグインを活用します。

Assistプラグインはテンプレートをカスタマイズしたい場合、テンプレートをテーマのディレクトリに置きます。これはGeeklogの共通ルールです。/layout/***/assist/template/... のように配置します。そのなかの、headercode/defaultの3つのソースに、以下の1行を追加します。なお、テンプレートに、customディレクトリを作成してそこにカスタマイズテンプレートをアップロードすることでカスタマイズできるのもGeeklog共通ルールです。

<meta name="twitter:card" content="summary">
コードを追加したうえで、以下のサイトでURLを申請します。

https://cards-dev.twitter.com/validator

Assistプラグインのダウンロード：
Geeklog 1.8以降 で活用できるアドオン

dataBoxなどで、テンプレートにアクセス制限を追加する

  • Friday, February 06 2015 @ 04:34 PM JST
  • 投稿者:
  • 表示回数 6,419
Geeklog

テンプレートにはこのようにPHPで、セキュリティーグループ別に表示・非表示を制御できます。

<?php if(SEC_inGroup('DataBox Admin')){ ?>
    DataBox Admin向けコンテンツをここに記述。
<?php } else { ?>
このページは公開していません。
<?php } ?>
if (COM_isAnonUser()){
    このページはログインが必要です。
} else {
    ログインユーザー向けコンテンツをここに記述。
}

特に、dataBox　の非公開領域のテンプレートのうち、データやカテゴリ、検索のlist_detail.thtmlは、上記のようなPHPで内容を囲んでおくと、公開したくないデータをURLを操作して公開されてしまうことを避けることができます。

Geeklog 自動タグ(Autotags)をPHPで実行する

  • Tuesday, January 13 2015 @ 02:16 AM JST
  • 投稿者:
  • 表示回数 22,829
Geeklog

自動タグをPHPで実行する場合は、次のように記述します。

[tagname:item]
これをPHPで実行するなら 
<?php echo PLG_replaceTags('[tagname:item]'); ?>
テーマ変数を引数にしたければ通常はPHPで記述の必要はありません。 
[tagname:{var}]
これを 
{!!autotag tagname:'.{var}.' !!}
と表示。 これをPHPで実行するなら 
<?php echo PLG_replaceTags('[tagname:'.$this->get_var('var').']'); ?>

自動タグをテンプレート内に記述するとき、引数をテーマ変数ではなく、自由な変数を使ってセットしたければ、以下のようにPHPで記述します。

<?php echo PLG_replaceTags('[tagname:'.$var.']'); ?>
なお、テーマ変数は、PHPでは以下のようにすればテンプレート内でも参照できます。 テーマ変数titleを取得したければ以下。 
$this->get_var('title');
PHPで、ログインしているかどうかの判定は以下。COM_isAnonUser()を使います。 
    if (COM_isAnonUser()){
        echo CUSTOM_getStaticpage('_login' );
    } else {
        echo CUSTOM_getStaticpage('_logout' );
    }

くわしくはWiki

テーマ変数をトリミングする場合は、テンプレートに以下のように記述します。 

<?php
$var = $this->get_var('data_description'); 
$length = 140; $encoding = 'utf-8'; echo mb_strimwidth( stripslashes( $var ), 0, $length, '...', $encoding);
?>
なお、多言語サイトの場合、言語IDは 
COM_getLanguageId()
で取得します。 例 

echo PLG_replaceTags('[staticpage_content:_header_navigation_'.COM_getLanguageId().']');

ページナビゲーション