UIkitのユーザーグループ"UIkit Japan"をFacebook上で作成

おしらせ
投稿者: 表示回数1,070 印刷用ページ
UIkitのユーザーグループ"UIkit Japan"をFacebook上で作成しました。
https://www.facebook.com/groups/uikit.japan/
UIkitは、ビデオによるチュートリアルのページも追加され、WordPressのテーマも増えてきました。
軽量でオブジェクティブなUIkitは今後益々活用していきたいフレームワークなので、日本語での情報交換の場としてFacebookでグループを作成しました。
どうぞご参加ください。

Geeklogで初期設定しておきたい自動タグプラグインの便利な使い方

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

自動タグプラグイン(Autotags plugin)をインストールしたら、よくつかう自動タグを最初から用意しておくと便利です。そうすることにより、記事をテキストモードで記述しながらリッチなコンテンツを作成できます。

キャプション

caption
<div class="uk-text-bold uk-text-center">#0</div>
e.g.
[ caption:キャプション ]
Demo
キャプション

テキストのセンタリング

center
<div class="uk-text-center">#0</div>
e.g. [ center:センタリングテキスト]
Demo
センタリング

ドメイン

domain
www.example.com
 例) www.ivysoho.net ※Facebook widjetなどをテンプレートに記述する際に利用
e.g.
[ domain: ]

外部リンク

extlink
<a href="#1" class="ext-link" target="_blank">#2</a>
e.g.
[ extlink:http://example.com Example ]
Demo
Example

掲示板センターブロックを表示

forumcenterblock
PHPで置換にチェック
return CUSTOM_centerblock_forum ($p1);
※custom_centerblock_forum.php を設置してください。
ダウンロード:  GitHub
ファイル:/private/system/custom/custom_centerblock_forum.php /private/system/lib-custom.php

h2タグ

h2
<h2 class="uk-h2">#0</h2>
e.g.
[ h2:h2タグ]
Demo

h2タグ

h3タグ

h3
<h3 class="uk-h3">#0</h3>

h4タグ

h4
<h4 class="uk-h4">#0</h4>

pdf

pdfをページに展開表示

<div class="uk-margin-top uk-visible-large">
<a class="embed-large" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>

<div class="uk-margin-top uk-visible-medium">
<a class="embed-medium" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>

<div class="uk-margin-top uk-visible-small">
<a class="embed-small" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>
/vendor/jquery-gdocsviewer/に、GitHub の/vendor/jquery-gdocsviewer/以下をアップロード。
footer.thtmlに以下を追加
必ずjQuery本体をロードした後に挿入してください。

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

テキストの右寄せ

right
<div class="uk-text-right">#0</div>

話題へのリンク

topic
PHPで置換にチェック
コンテンツは空白。


Favicon 自動作成サービスサイト

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

写真や画像から簡単に各種faviconを作成してくれるWebサービスはこちら。

Favicon Generator

256ピクセル以上の正方形の画像をアップロードして作成します。

iPhoneやiPad、Androidで使われるWebクリップ用のアイコンもこれで一度で作成できて大変便利です。

zip形式でダウンロードしたファイルをサーバーにアップロード。header部分に同梱しているhtml形式のソースを張り付けるだけです。Geeklogの場合は、テーマのheader.thtmlに以下のように、{site_url}{xhtml}タグを追加します。

<!-- Favicons Generated with favicon.il.ly -->
<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="{site_url}/favicon.ico"{xhtml}>
<!--[if IE]>
<link rel="shortcut icon" href="{site_url}/favicon.ico"{xhtml}>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="{site_url}/favicon-152.png"{xhtml}>
<!-- Optional: IE10 Tile.-->
<meta name="msapplication-TileColor" content="#FFFFFF"{xhtml}>
<meta name="msapplication-TileImage" content="{site_url}/favicon-144.png"{xhtml}>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="{site_url}/favicon-152.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{site_url}/favicon-144.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="{site_url}/favicon-120.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{site_url}/favicon-114.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{site_url}/favicon-72.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" href="{site_url}/favicon-57.png"{xhtml}>

URL一致の正規表現

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

デリミタとして @ を使う場合、URL一致の正規表現は以下のようになります。

http://www.geeklog.jp に一致する正規表現:

@^http://www\.geeklog\.jp$@

Custommenu カスタムメニュープラグインで活用できます。

UIkitのAccordion(折り畳み機能)

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

フロントエンドフレームワークUIkitのAccordion(折り畳み機能)は便利です。 uk-nav-parent-iconで、折り畳みの状態を表示。

<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{ multiple: true }">
	<li class="uk-parent">
		<a href="#">DEMO1</a>
		<ul class="uk-nav-sub">
			<li>...</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
	<li class="uk-parent">
		<a href="#">DEMO2</a>
		<ul class="uk-nav-sub">
			<li>...</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
	<li class="uk-parent">
		<a href="#">DEMO3</a>
		<ul class="uk-nav-sub">
			<li>...</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
</ul>
※Geeklogのテンプレートに記述するときは、{ の後にかならず空白を追加してください。{で囲むとテーマ変数処理をするため、その処理をしないようにする必要があります。

多言語サイトでテンプレートに自動タグで静的ページの内容を読み込む方法

Geeklog
投稿者: 表示回数1,335 印刷用ページ
テンプレートに、自動タグで、静的ページの内容を読み込む場合は、以下のように記述します。
{!!autotag staticpage_content:XXXXX !!}
多言語サイトでテンプレートに記述する際に、自動タグで言語別に用意された静的ページ"XXXXX_言語ID"の内容を読み込む場合に以下のようにすると、対応した言語のコンテンツを読み込むことができます。
<?php echo PLG_replaceTags('[staticpage_content:XXXXX_'.COM_getLanguageId().']'); ?>

dataBox 検索について

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

データのAND検索、OR検索機能が追加されましたが一部説明を追加します。

テーマは、/layout/テーマ/databox/にアップロードして、コンフィギュレーションにてテーマのパスを標準からテーマ に切り替えて利用すると便利です。

さて、検索関係は、以下のディレクトリにテンプレートがあります。

/layout/テーマ/databox/templates/search/default

テンプレートファイルの役割:

argument.thtml
検索form
col_detail.thtml
検索結果のデータのコンテンツ 通常category のcol_detail.thtmlをそのままコピーすればOK
headercode.thtml
ogpをセット。すべてのアトリビュートをここに記述できるので、og:imageなどセットできます。
list_detail.thtml
検索結果がある場合のページ全体のレイアウト
navigation_detail.thtml
検索結果の要素をリスト
nohit.thtml
検索結果が無い場合のページ全体のレイアウト
pagenavigation.thtml
ページナビゲーション
row.thtml
要素の1行区切り 通常空白

argumant.thtml 補足

OR検索の場合

<!--gor_X カテゴリグループid=Xのカテゴリを複数指定する OR条件 -->
{gor_X}<input name="gor_X[]" value="" type="hidden">

AND検索の場合

<!--gand_X カテゴリグループid=Xのカテゴリを複数指定する AND条件 -->
{gand_X} <input name="gand_X[]" value="" type="hidden">

※X: Group ID(1,2,3.... )

自動タグ: [ databox:search 検索の引数(ただし[]部を除く)]

検索自動タグを静的ページに記述するdemo:

https://www.ossj.jp/staticpages/index.php/oss

dataBox を含んだGeeklog一式のダウンロードはこちらから。

https://github.com/ivywe/geeklog-ivywe

なお、/layout/テーマ/databox/templates/search/defaultは、/layout/テーマ/databox/templates/search/にdefaultを元に複数テーマを追加することができます。

UIkitをBootstrapテーマの管理画面やUIkitを使っているMediagalleryだけに追加する

Geeklog
投稿者: 表示回数1,881 印刷用ページ
UIkitをBootstrapテーマの管理画面やUIkitを使っているMediagalleryだけに追加する場合は、以下のようにheader.thtml footer.thtmlに記述します。
<?php $url_current = COM_getCurrentURL(); if( ( strpos( $url_current,
'/admin/' ) !== false ) ||  (strpos( $url_current,
'/mediagallery/' ) !== false ) ){ ?>

<!-- /admin/ や/mediagallery/ では呼びたい、UIkitなどのCSSやJS -->
<link rel="stylesheet" href="{layout_url}/vendor/uikit/css/uikit-ivywe.css"{xhtml}> 


<?php } else { ?>

<!-- /admin/では呼びたくない、BootstrapなどのCSSやJS -->

<?php } ?>

Geeklogのsite_urlを複数で表示するためのhack

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

EasySCPを活用したサーバーでは、ドメインに対して代替URLを提供しています。

開発中のサイトをリニューアル公開以前には、代替URLを活用して表示できます。

両方で表示できるためのハックはこちら。

lib-common.phpの100行目あたりを変更します。

from:

$_CONF = $config->get_config('Core');
to:

$_CONF = $config->get_config('Core');

if (strpos($_CONF['site_url'], $_SERVER['SERVER_NAME']) === false) {
 if (strpos($_SERVER['SERVER_NAME'], 'vu20XX.admin.XXX.com') !== false) {
  $substitute_domain='vu20XX.admin.XXX.com';
  $_CONF['site_url']          = 'http://'.$substitute_domain;
  $_CONF['site_admin_url']    = 'http://'.$substitute_domain.'/admin';
  $_CONF['layout_url']        = 'http://'.$substitute_domain.'/layout/'.$_CONF['theme'];
  $_CONF['site_disabled_msg'] = 'http://'.$substitute_domain.'/japanize/disabledmsg.html';
  $_CONF['cookiedomain'] = empty($_CONF['cookiedomain']) ? '' : str_replace($_SERVER['SERVER_NAME'], $substitute_domain, $_CONF['cookiedomain']);
 }
}