当サイトでは、自作のXOOPS(XOOPS Cube Legacy 2.2)用テーマの無料配布を行っています。

機能をちょっとアップするプリロードなどもあるので、是非ともご利用くださいませ。

新着ダウンロード

テーマ選択

screenshot

(59 テーマ)

 このカテゴリには 2 件のファイルがあります  |  表示数   |  
ソート順  タイトル () 掲載日 () 評価 () ダウンロード数 ()
現在のソート順: 日時(新しいものから)
ここでは、XOOPS Cube Legacy を便利に使うカスタマイズ方法などのTips等を集めたファイル群などを配布したいと思います。

カテゴリ カスタマイズ
pico:ページネーションと関連記事一覧を追加する 人気ダウンロード情報
バージョン: 1.00   掲載日:  2013/1/18
説明

picoにページネーションと関連記事一覧を追加する

※ ダウンロードしたファイルの拡張子が無い場合があります。その場合は、ダウンロードしたファイル名に拡張子「.zip」を追加してください。

静的ページ作成に便利なpicoですが、各記事を表示している場合、前後記事とカテゴリトップに戻るリンクが表示されるものの、そのカテゴリにある記事一覧の表示がなく、全体像が把握しにくいですね。

ということで、ブログのようなページネーションとか関連記事一覧表示機能を追加してみましょう。

 

picoのオリジナル状態

pico_custom_image002.jpg
pico_custom_image004.jpg

記事の下に「次の記事」へのリンクがありますが、全体像は掴みにくいですね。

もちろん、サイドカラムなどに「コンテンツメニューブロック」を表示させると良いのですが、他のサイトで良く見かけるブログなどのように、その記事ページに関連する記事一覧が出ていると結構便利なこともあるようです。

ということで、カスタマイズしてみました。

pico_custom_image006.jpg

ブログなどでよく見られるような、記事の上に「次の記事」へのリンクを設けました。
記事の下には、全記事へのリンクを示すページネーションを追加して、さらにその下に関連記事一覧を表示するようにしています。また、関連記事一覧については、5件ずつ表示、タブで切り替えできるようにしてみました。(jQuery利用)

さらに、ページネーションについては、マウスオーバーすると記事の題名をポップアップするようにしているので、結構、把握しやすいのではないかと思います。

pico_custom_image008.jpg

カスタマイズ方法

Altsysでカスタマイズ用のテンプレートを作成のうえ、picoのテンプレート編集を行います。
ダウンロードしたファイルを解凍して、「pico_main_viewcontent.html」と「pico_main.css」をそれぞれ対応するテンプレートファイルに上書きしてください。

Altsysによるテンプレート編集方法はこちらをご覧ください。

xugj_blockをsmartyプラグインディレクトリにコピー(FTPにて)

このカスタマイズでは、xugj_blockプラグインを利用していますので、解凍したファイル「function.xugj_block.php」をプラグインディレクトリにFTPソフトなどでコピー(アップロード)してください。
※ XoopsXではデフォルトでインストール済みのようですので、この作業は不要です。

xoops_trust_path/libs/smartyplugins または
xoops_trust_path/libs/smarty/plugins

注意事項

また、当サイトで公開している「ページトップに戻るボタンを付加するプリロード」をお使いの場合は、jQueryによる機能のバッティングがありますので、次の箇所(38行目付近)をコメントアウトしてご利用願います。

/** この行を追加
  jQuery("a[href^=#]").click(function(){
    var Target = $(this.hash);
    var TargetOffset = $(Target).offset().top - 40;
    jQuery("html,body").animate({
      scrollTop: TargetOffset
      }, 1000);
      return false;
  });
この行を追加  */

[ ファイル名 ] pagenate.zip [ MD5 checksum ] 6a9032ed12e1a5b759833e17dac6c2a4
ダウンロード数 123   ファイルサイズ 5.84 KB   利用可能なOS/ソフト等 XOOPS Cube Legacy 2.2x   ライセンス GPL v. 2.0   ホームページ Xoops123
| ファイル破損/リンク切れを報告 |  友達に伝える |  コメント (11)

カテゴリ カスタマイズ
XOOPSに適切なメタ情報とOGPを付加するカスタマイズ 人気ダウンロード情報
バージョン: 0.03   掲載日:  2012/6/22
説明
XOOPSに適切なメタ情報とOGPを付加するカスタマイズを考案しました。

html/common に ogp 用のファイル群が入ったディレクトリを追加して、利用するテーマファイルを修正することで、従来からあるメタ情報とOGPが適切に設定されるように、考えてみました。
まだまだ工夫する必要もあるとは思いますが、まずは公開してみたいと思います。

2012/6/22 テーマファイルの書き換えが極力少なくなるように修正してみました。

 


XOOPSに適切なメタ情報とOGPを付加するカスタマイズ

================================================================
説明
================================================================
OGPというのはThe Open Graph protocolの略でフェイスブックを始めmixiやGoogle+等のSNSとウェブページを連携させるための情報をコンピュータが読めるように記述したものだそうで、従来から言われるメタ情報とともに適切に設定することで、そのサイトの情報を正確に伝えることが出来るため、最近とみに重要度が増しているものです。

しかし、XOOPS Cube では、管理画面でサイト統一の固定した内容をメタ情報として設定できるだけで、ページごとに適した内容を付加することはできませんでしたし、OGPについては設定することすらできない状況です。

Wordpressなどでは、プラグインを追加するだけで、OGPを適切に追記できるような機能があるようですので、何とかならないかと考えて作ったのが、今回のカスタマイズです。

プラグインを追加してとか、プリロードだけでできないかと、考えてみたのですが、そこまでの簡易化はちょっとできなかったものの、何とか使えるものが出来たように思うので、今回公開することとしました。


================================================================
インストール+カスタマイズ
================================================================
利用するには、まず、解凍してできあがったディレクトリにある html/common/ogp ディレクトリをサイトのhtml側にコピーしてください。

お使いのテーマ(theme.html)のメタ情報部分等を下記要領で書き換えて下さい。もちろん、何かあったときのために、あらかじめカスタマイズするテーマのバックアップを取ることをお忘れなく。

★1 <html>の書き換え

★★HTML5の場合

<html>



<html lang="<{$xoops_langcode}>" prefix="og: http://ogp.me/ns#">

に書き換える。


★★それ以外の場合は、

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">



<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" version="XHTML+RDFa 1.0" xml:lang="<{$xoops_langcode}>" dir="ltr" xmlns:fb="https://www.facebook.com/2008/fbml">

に書き換える。


★2 metaタグ等の書き換え

<head>より下にある metaタグ(keywords,robots,description,rating,author,copyright)と<title>記述部分を削除して、次の1行を挿入してください。


<{include file="`$smarty.const.XOOPS_ROOT_PATH`/common/ogp/meta_add.html"}>


また、解凍したディレクトリの html/common/ogp には、OGPのimage 情報として表示される user.gif のサンプル画像入っていますが、この画像について、あなたのサイトを特徴づける画像と差し替えてください。できればサイズは、200ピクセル四方のものが良いようです。(サンプルは小さいものとなっていますが)
画像について、違うファイル名の場合は、テーマに記述する当該画像部分のファイル名称を変更してください。


メタ情報とOGPについては、meta_info.html 内にてモジュールごとの表示分岐を設定しておりますが、基本設定として

	<{$xoops_pagetitle}> と <{$xoops_meta_keywords}> と <{$xoops_meta_description}>

などのsmarty変数を利用しているため、場合によってはページに適さないものとなる場合があると思います。
その場合には、meta_info.html を編集していただき、モジュールやページにふさわしいキーワードなどを直接記述していただくことで対応可能となります。

メタ情報の書き方は,区切り文字 || を挟んで,「ページタイトル」||「METAタグ(キーワード)」||「METAタグ(Description)説明」の順を守って記述してください。情報記入のない場合は、XOOPSの管理画面で設定した内容が入ります。モジュールによっては、descriptionに記事に応じた内容が入るものもあります。

例えば、bulletinなどでは、個別記事を表示した場合には、記事のタイトルと本文が <{$xoops_pagetitle}> と <{$xoops_meta_description}> などに入りますので、適切な表示となると思いますが、トップページ表示の場合は、XOOPSの管理画面で設定した内容が入るため、bulletinのトップページとしてふさわしくない場合があります。meta_info.html には、とりあえず説明サンプルを記入していますが、貴方のサイトに合うような内容に変更してご利用ください。


<{elseif $xoops_dirname == "bulletin"}>
	<{if substr($xoops_requesturi,-9) == '/index.php' or substr($xoops_requesturi,-1) == '/'}>
		ここはお知らせのトップページです。||ここはお知らせのキーワード||ここにはお知らせの説明を書きましょう
	<{else}><{* bulletinは、トップページ以外は本文がdescriptionに挿入される *}>
		<{$xoops_pagetitle}>||<{$xoops_meta_keywords}>||<{$xoops_meta_description}>
	<{/if}>

[ ファイル名 ] ogp_add.zip [ MD5 checksum ] ceb5e6ad412af75f67ec611cd5f715b2
ダウンロード数 109   ファイルサイズ 10.57 KB   利用可能なOS/ソフト等 XOOPS Cube Legacy 2.1x | XOOPS Cube Legacy 2.2x   ライセンス LGPL v. 2.0   ホームページ Xoops123
| ファイル破損/リンク切れを報告 |  友達に伝える |  コメント (0)