UIkitを既存Geeklogサイトに追加する方法

Geeklog
投稿者: 表示回数6,410 印刷用ページ

UIkitを既存Geeklogサイトに追加する方法を簡単に紹介します。

1.UIkitを以下のURLからダウンロードして、/layout/テーマ/vendor/uikit/ にアップロード。
http://getuikit.com/

2.テーマファイル(/layout以下のテーマ)のheader.thtmlの{rel_links}の前に以下のように追加。

<link rel="stylesheet" href="{layout_url}/vendor/uikit/css/uikit.css"{xhtml}>

3.テーマファイル(/layout以下のテーマ)のfooter.thtmlの{plg_footercode}の後に以下のように追加。

<script type="text/javascript" src="{layout_url}/vendor/uikit/js/uikit.js"></script>

※{plg_footercode}でjQuery本体が呼ばれています。そのためその後にこの行を追加する必要があります。

Geeklogのヘッダーテンプレートheader.thtmlにCache一括削除ボタンを追加する

Geeklog
投稿者: 表示回数2,525 印刷用ページ

Geeklog2.0よりCacheが対応。コンテンツを修正したのに表示が切り替わらない。テンプレートを修正したのに、表示がおかしい、管理画面の表示が古い、などなど、Cacheが不用意に残ってしまったために数々の不具合が発生しがちです。

そのような場合いちいち管理ブロックのキャッシュ一括削除リンクをクリックするのは面倒なので、ヘッダに追加すると便利です。

追加方法


	    <?php if(SEC_inGroup('Root')){ ?>
			<li><a type="button" href="{site_url}/admin/clearctl.php">Clear Cache</a></li>
		<?php } ?>
	    <?php if(SEC_inGroup('mediagallery Admin')){ ?>
			<li><a type="button" href="{site_url}/mediagallery/">Gallery</a></li>
		<?php } ?>

グループ管理画面を確認して適した管理グループ名を設定してください。

静的ページPHPによるお問い合わせフォーム2.1.8

Geeklog
投稿者: 表示回数5,495 印刷用ページ

お問い合わせフォームのダウンロードは、こちらから。

http://hiroron.com/downloads/index.php/sp-formmail

文字数のmin maxの指定、半角チェック、必須チェックなど、多機能です。

    array('header' => 'メールアドレス',
          'valid_require' => $required_string, 'error_require' => 'メールアドレスが入力されていません',
          'valid_hankaku' => 'q_mail', 'error_hankaku' => 'メールアドレスはすべて半角で入力してください',
'valid_maxlen' => 'q_mail=240', 'error_maxlen' => 'メールアドレスの文字数は240桁以下にしてください。',

jQuery ローディングプラグインwaitMeをGeeklogにインストールする

Geeklog
投稿者: 表示回数5,967 印刷用ページ

jQuery ローディングプラグインwaitMeを配布元サンプルを参考にinputタグで実行できるよう変更しGeeklogでの変更方法を紹介します。

配布元サンプルは、

<button type="button" id="demo">Submit</button>

で実行しますが、ここでは、input type="submit"にて実行するように変更しました。

<input type="submit" value="Go"  id="demo" >

UIkit サンプルサイト

Geeklog
投稿者: 表示回数5,043 印刷用ページ
Front-end framework には、Bootstrapが良くつかわれますが、UIkitは、すべての関数、classにuk-という前置子が使われるのでコンフリクトすることが少なく、使いやすいのがメリットです。

UIkit
http://getuikit.com

UIkitのカスタマイザーで、スタイルをカスタマイズしてダウンロードして活用します。

UIkitカスタマイザー
http://getuikit.com/docs/customizer.html

ショーケース:
http://getuikit.com/showcase/index.html

アイビー・ウィー開発事例:
http://www.ivywe.co.jp
http://www.ivysoho.com
http://www.geeklog.jp