2011年6月30日木曜日

WP内でカテゴリー事にテンプレートを変更する。

カテゴリー事にテンプレートを変更できます。

http://web-taiyo.com/wordpress-plugin/theme_switcher.html

http://wordpress.org/extend/plugins/wp-theme-switcher/

から「wp-theme-switcher.zip」をDLしてサイトにインストルします。

設定からカテゴリーのアドレスをテンプレの箇所に入力しておわり。

ヘテムルの場合は.htaccessが必要。
http://heteml.jp/support/manual/php5/

rootとプラグインのフォルダに入れると使えます。


BMDのサイトで使用してます。

バクレツフォルダにも「WPテーマ事にデザインを変更」で素材はいってます。

ワードプレスのページ制作について

http://webdesignrecipes.com/wordpress-customize-with-template-files/

この記事えーわー。

ワードプレスで個別ページ作る時に2カラムにしたり、1つにしたりできて、便利でした。

ワードプレスのテンプレートの文字化け

テンプレートを作ってると、アップした時に文字化けしてる時があるので、直す方法。

・DWとテンプレの文字コードを合わせる。

普通で当たりまえ。

これで出来ない場合、正当なやり方かどうかわからないですが、
各データに文字コードを入れると直る。

footer.phpやheadder.php等各データに文字コード指定してやる。

「meta http-equiv="Content-Type" content="text/html; charset=UTF-8"」

のような感じで。

http://www.dspt.net/html_tag/001_data/017.html


この方法は成功塾で使用してます。

2011年6月16日木曜日

WPでいいねボタンのプラグイン

ワードプレスにファイスブックのイイネボタンを設置
http://www.taskmother.com/wordpress/363.html

ここで紹介してもろたプラグインを使用しました。

「facebook-like-button.5.9.2.zip」

XFBMLとIFRAMEが選択出来る所はIFRAMEに選択したら上手くいきました。
あとは記事事かページ事か等、の配置する箇所を選択して。終了。簡単でした。
英語だけど、なんとなくわかるんで大丈夫。


あと、フェイスブック以外のSNS ツイッターや、ミクシーチェック等の様々なボタンを設置できるのもありました。

http://nm705.com/tech/wp/220

ここに紹介されてるのが。
「wp-social-bookmarking-light.1.6.9.zip」

これも一括でボタンを配置できます。ちょうどこのブログ記事の下に配置されてるボタンと同じ感じの物です。

ただ、何故かいいねボタンが上手く配置できなかったので、諦めました。
なんでやろか??

BMDのブログに二つとも実装中やけども「wp-social-bookmarking-light.1.6.9.zip」は停止させてます。

データはバクレツフォルダにあります。

文字サイズの変更

割りと簡単にできました。

http://www.skuare.net/2009/09/javascriptjquery_text_resizer.html

http://angstrey.com/index.php/projects/jquery-text-resizer-plugin/


divで指定した範囲の文字が変更される。

日大で使用してるので,確認して使おう。

バクレツフォルダにjsファイル入ってます。

2011年6月15日水曜日

css3 transition slider

こんど使わせていただこう。

スライド

http://kachibito.net/web-design/css3-transition-slider.html

2011年6月14日火曜日

joomla!1.5でgooglemapを使う

便利なプラグイン。

http://www.joomlaway.net/extension-new/external-contents/maps/957-plugin-googlemaps.html

ここに書いてる通りです。

記事がなくなるといけないんで、コピペしもす。

※ファイルは一応バクレツフォルダに入ってます。

フェアトレードで使用してるんで使うまえに確認しよう。

/////以下コピペ///////////////////

概要

  • 記事にプラグインタグを入力する事でGoogle Mapsを表示できる。
  • タグ入力時に様々なパラメータを指定可能。

インストール

ダウンロード後、「エクステンション」→「インストール/アンインストール」からインストールして下さい。その後、プラグインを有効してください。

初期設定

  1. プラグインの設定画面を開き、「Google API」にGoogle Map APIキーを入力します。
  2. 「Google website」から「Japan(maps.google.jp)」を選択します。
  3. そのほか必要に応じてGoogleマップのデフォルト値を設定します。サイト全体で共通にしたい設定を行えば良いでしょう(例えばマップの幅、高さ、初期のズームレベルなど)。

Googleマップを埋め込む

記事にプラグインのタグを入力する事でマップを表示できます。この際にプラグインのパラメータも指定できます。
例えばGoogleマップを埋め込みたい記事に次のタグを入力します。

{mosmap}
記事を表示するとGoogleマップが表示されます。今回のようにオプションを指定しない場合は、プラグインのパラメータに設定された Latitude(緯度)、longitude (経度)が使用されます。
例えば緯度と経度を指定するには次の様にします(以下の場所は東京タワーです)

{mosmap lat='35.658587'|lon='139.745425'}
パラメータ名='値'と言う形式でパラメータを指定し、複数指定する場合は'|'でつなげればOKです。パラメータの順序は関係有りません。例えばズームレベルを指定するなら次の様にします。

{mosmap lat='35.658587'|lon='139.745425'|zoom='16'}
インフォウインドウ(吹き出し)を表示したいなら次の様にします。

{mosmap lat='35.658587'|lon='139.745425'|zoom='16'|text='東京タワー'}
「text」のパラメータにはHTMLも利用できるので画像の埋め込みなども可能です。
また緯度と経度を指定しなくてもジオコーディングも可能です。

{mosmap address='東京タワー'}
次の様に指定するとマップの上に住所検索可能なテキストボックスが表示されます。

{mosmap address='東京タワー'|gotoaddr='1'}
またKMLファイルも指定することが可能です。KMLファイルについて詳しくはこちらをご覧下さい。例えば以下は株式会社東京地図研究所で公開されている「東京銭湯マップ」を表示する例です。

KMLファイルを使用すれば、1つのマップに2カ所以上のマーカーを表示する事ができます。
これ以外にも指定できるパラメータがありますので、詳しくは下記を参照して下さい。
また下記はプラグインのデモというかTipsみたいなもんです。参考にして下さい。

2011年6月13日月曜日

カラーミーでライトボック使えましたよ。

カラーミーでライトボックスを使用できました。
できると思ってたけど。やはりできました。

jsを置くサーバーが他にいります。

そこにjsおいて、共通htmlに絶対パスで放り込みます。

そしてカラミの商品詳細の画像のリンクに

「rel="lightbox"」

記入したらうごきます。

closeのイメージなども絶対パスでないと出てこないです。

2011年6月10日金曜日

いまさらですが、dlが新着情報で使うのにピッタリでした。

新着に使える<di></dl>
日付と本文でわけるさいに有効なCSSです。


日大のスケジュールで使用してるので、忘れてたら見よう。
http://www.tagindex.com/template/list/update.html

ここみたら分かります。

jQueryとプロトタイプの共存

jsを使うようになり便利になったけど、追加し過ぎて無理な場合もよくありますが、

プロトタイプを先によませて

<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>

をいれたら動きました。

参考
http://kanamehackday.blog17.fc2.com/blog-entry-144.html


<script src="../js/prototype.js" type="text/javascript"></script>
<script src="../js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../js/ui.core.js" type="text/javascript"></script>
<script src="../js/ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>

IEだけ高さがおかしい

font-size: 0;
にしたら解決しました。

他にも
http://coliss.com/articles/build-websites/operation/css/753.html
に解決策がありました。

IEはずれますわなー。