大学のレスポンシブウェブデザイン対応状況を調査
- Saturday, May 09 2015 @ 12:27 PM JST
- 投稿者: Admin
- 表示回数 3,723
Thursday, December 05 2024 @ 11:56 AM JST
GeeklogでHTML5テーマを開発する場合に、注意する点は以下です。
1.functions.phpのfunction theme_config_テーマ名()を以下のように修正してください。コンフィギュレーションのテーマでのDOCTYPE宣言よりこちらを優先します。
function theme_config_テーマ名()
{
return array(
'image_type' => 'png',
'doctype' => 'xhtml5',
'etag' => true,
'supported_version_theme' => '2.1.0'
);
}
{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ファイルを、Google Docs Viewerでその場で閲覧できる様にするjQueryプラグイン・gDocsViewer(ライセンスMIT)をGeeklogで活用する方法を紹介します。
gdocsviewerをダウンロードして/vendor/gdocsviewer/以下にアップロードします。
<!-- 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 を追加。置換文字列には以下のコードを記述してください。
<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
ウェブサイト翻訳ツール - ウェブサイトプラグインをGeeklogサイトに追加する方法を紹介します。
動作はこのページの右上ブロックで確認してください。
ウェブサイト翻訳ツール - ウェブサイトプラグインをGeeklogサイトに追加する方法は、以下のURLからスニペットを取得。
https://translate.google.com/manager/website/addテーマのheader.thtmlにヘッダー部分を追加して、ブロックや静的ページなどのコンテンツ部に、記述するだけで表示できます。
Mediagallery hackを活用すると、メディアギャラリーのコンテンツを作成するだけで、自動タグを使ってコンテンツを展開できます。
http://www.ivysoho.com/databox/data.php/ceviche/code
このページを作成するために、メディアギャラリーでアルバムを作成しています。画像を一括アップロードできて、画像のサムネイルを見ながらキャプションと説明を追加できます。
http://www.ivysoho.com/mediagallery/album.php?aid=68&page=1
https://bitbucket.org/tsuchi/mediagallery_hack
[ medialist:(ID) theme:default limitcnt:100]
※[の後にスペースは削除して活用してください。
theme:default は、デフォルトテーマなので省略できます。
defaultのテーマのテンプレートは以下のようになっています。
<!-- plugins/mediagallery/templates/medialist/default/autotag_medialist.thtml 20150309 { -->
{!if edit}
<fieldset>
<legend><a href="{site_url}/mediagallery/album.php?aid={album_id}&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 -->
ログインした時に、bodyタぐ等に特別なIDを当てる方法は、いくつかの方法が用意されています。
[h3:ログイン・非ログインで、bodyタぐ等に特別なIDを当てる方法] [h3:1.Geeklog標準機能のCaching_Template_Libraryを活用する場合]<body id="{!if onlyloggedinusers}
<body id="member">
{!else}
<body id="guest">
{!endif}
[h3:2.Geeklog標準機能のテンプレートにPHPを記述する場合] <body id="<?php
if (COM_isAnonUser()){
echo "guest";
} else {
echo "member";
}
?>">
[h3:3.Assistプラグイン 自動タグを活用する場合] <body id="{!!autotag assit:login_status !!}">
{!!autotag assit:login_status !!}は、 member または guest (言語ファイルで変更可)
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以降 で活用できるアドオン
テンプレートにはこのようにPHPで、セキュリティーグループ別に表示・非表示を制御できます。
<?php if(SEC_inGroup('DataBox Admin')){ ?>
DataBox Admin向けコンテンツをここに記述。
<?php } else { ?>
このページは公開していません。
<?php } ?>
if (COM_isAnonUser()){
このページはログインが必要です。
} else {
ログインユーザー向けコンテンツをここに記述。
}
特に、dataBox の非公開領域のテンプレートのうち、データやカテゴリ、検索のlist_detail.thtmlは、上記のようなPHPで内容を囲んでおくと、公開したくないデータをURLを操作して公開されてしまうことを避けることができます。
自動タグを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().']');