Banjo http://customizing-design.net Customizing-Design for WordPress Thu, 05 Apr 2012 02:34:59 +0000 ja hourly 1 http://wordpress.org/?v=3.1 WPtouchプラグインをカスタマイズしてみよう！ http://customizing-design.net/2011/06/13/wptouch_customize/ http://customizing-design.net/2011/06/13/wptouch_customize/#comments Sun, 12 Jun 2011 17:20:27 +0000 Banjo http://customizing-design.net/?p=1354 続きを読む →]]> 完成イメージ

導入までの流れ

  • iPhone用最適化プラグインインストール
  • 有効化
  • 初期設定
  • 新規テーマ作成
  • メイン画像の追加
  • ソーシャルとの連携（WordTwit・WP Social Bookmarking Light・Twitterガジェット）

①まずはインストールしよう！

管理画面より「プラグイン」→「新規検索」を選択します。
プラグイン検索欄に「WP Touch」と入力し「プラグインの検索」をクリックします。

検索結果に「WP Touch」が表示されるので「いますぐインストール」を選択します。

「インストールが完了しました。」と表示されれば完了です！

早速、「プラグインを有効化」から有効化してみましょう！

管理画面の「設定」部分に「WP Touch」が表示されました。
これでiPhone用に最適化されました！

②日本語化しよう！

まず英語はわからないという人は、管理画面を日本語化しましょう。
「WP touch Language」から「Japanese」を選択します。

選択したら画面の一番下の「Save Options」から保存します。
これで日本語になりました。よかったよかった!!!

③自分のテーマを作成しよう！

まずはテーマを作成します。
wp-content/plugins/wptouch/themes/default/
先ほどダウンロードしたファイルから「default」テーマを丸ごとコピーします。
新しいテーマ名に変更します。今回は「new_themes」とします。

wptouch.phpのソース編集

次に、新しいテーマを読み込ませる為にファイルを変更します。

wp-content/plugins/wptouch/wptouch.php

「wptouch.php」（version：1.9.35）　602行目あたりと611行目あたりの2箇所

「default」の部分を新しいテーマ名「new_themes」に変更し、保存します。

 

④自分のテーマのメイン画像追加しよう！

画像main_img.jpg (w320 h200)を用意

用意できたら画像を下記の場所にフォルダを作成し、アップロードしましょう。
http://example.com/wp-content/plugins/wptouch/themes/new_themes/images/

header.phpのソース編集

画像を読み込ませるためにファイルを変更します。

http://example.com/wp-content/plugins/wptouch/themes/new_themes/header.php

ここの最終行にある

<?php wptouch_core_header_check_use(); ?>

このうえに

<!-- #start the wptouch plugin use check --><a href="http://example.com/"><img title="メインタイトル" src="http://example.com/wp-content/plugins/wptouch/themes/new_themes/images/main_img.jpg" alt="メインタイトル"/></a>

これを追加して保存！

ホームへリンクさせるのも忘れずに！！！

 

⑤ソーシャルボタンを設置

■ソーシャルプラグイン導入

有効化するだけで、様々なソーシャルボタンを記事やページ内に挿入する事ができます。もちろんiPhoneでも閲覧できます。

■WordPress投稿内容をTwitterと連動させる（WordTwitプラグイン）

Twitterアカウントを設定すればOK！
ドンドン投稿してみんなと記事を共有しよう！！！

■Twitterガジェットを表示させる方法


こちらでTwitterガジェットのコードを取得します。

index.phpの書き換え

/wp-content/plugins/wptouch/themes/new_themes/index.php取得したコードはindex.phpを編集します。

149行目あたり

<div id="ajaxentries<?php echo md5($_SERVER['REQUEST_URI']); ?>">

のソースの直前に先程のサイトで取得したコードを挿入します。




<div><script src=”http://widgets.twimg.com/j/2/widget.js”></script>    <script>    new TWTR.Widget({      version: 2,      type: ‘profile’,      rpp: 10,      interval: 6000,      width: ‘auto’,      height: 600,      theme: {        shell: {          background: ‘#09732c’,          color: ‘#ffffff’        },        tweets: {          background: ‘#ffffff’,          color: ‘#323232′,          links: ‘#3a64ad’        }      },      features: {        scrollbar: true,        loop: false,        live: true,        hashtags: true,        timestamp: true,        avatars: true,        behavior: ‘all’      }    }).render().setUser(‘Twitterのアカウント名’).start();    </script></div>







※注意点


    
  
  • <div></div>で囲んでください
    
    
    • 
  
  • width: ‘auto’,←横幅はautoにしてください
    
    
    • 
  
  • setUser(‘Twitterのアカウント名’).←ツイッターアカウントを変更してください
    • 


]]>
			http://customizing-design.net/2011/06/13/wptouch_customize/feed/
		9
		
		
		MacBook Proが家にキターー！！
		http://customizing-design.net/2011/05/14/macbook-pro%E3%81%8C%E5%AE%B6%E3%81%AB%E3%82%AD%E3%82%BF%E3%83%BC%E3%83%BC%EF%BC%81%EF%BC%81/
		http://customizing-design.net/2011/05/14/macbook-pro%E3%81%8C%E5%AE%B6%E3%81%AB%E3%82%AD%E3%82%BF%E3%83%BC%E3%83%BC%EF%BC%81%EF%BC%81/#comments
		Sat, 14 May 2011 10:59:40 +0000
		Banjo
				

		http://customizing-design.net/?p=1343
		
			

]]>
			http://customizing-design.net/2011/05/14/macbook-pro%E3%81%8C%E5%AE%B6%E3%81%AB%E3%82%AD%E3%82%BF%E3%83%BC%E3%83%BC%EF%BC%81%EF%BC%81/feed/
		1
		
		
		YouTube、ライブ映像配信サービス「YouTube Live」開始
		http://customizing-design.net/2011/04/11/youtube%E3%80%81%E3%83%A9%E3%82%A4%E3%83%96%E6%98%A0%E5%83%8F%E9%85%8D%E4%BF%A1%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%80%8Cyoutube-live%E3%80%8D%E9%96%8B%E5%A7%8B/
		http://customizing-design.net/2011/04/11/youtube%E3%80%81%E3%83%A9%E3%82%A4%E3%83%96%E6%98%A0%E5%83%8F%E9%85%8D%E4%BF%A1%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%80%8Cyoutube-live%E3%80%8D%E9%96%8B%E5%A7%8B/#comments
		Mon, 11 Apr 2011 06:29:15 +0000
		Banjo
				

		http://customizing-design.net/?p=1340
		
			ライブ配信するのですね！
http://japan.internet.com/busnews/20110411/7.html

]]>
			http://customizing-design.net/2011/04/11/youtube%E3%80%81%E3%83%A9%E3%82%A4%E3%83%96%E6%98%A0%E5%83%8F%E9%85%8D%E4%BF%A1%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%80%8Cyoutube-live%E3%80%8D%E9%96%8B%E5%A7%8B/feed/
		1
		
		
		ココロあったまった歌
		http://customizing-design.net/2011/03/16/%E3%82%B3%E3%82%B3%E3%83%AD%E3%81%82%E3%81%A3%E3%81%9F%E3%81%BE%E3%81%A3%E3%81%9F%E6%AD%8C/
		http://customizing-design.net/2011/03/16/%E3%82%B3%E3%82%B3%E3%83%AD%E3%81%82%E3%81%A3%E3%81%9F%E3%81%BE%E3%81%A3%E3%81%9F%E6%AD%8C/#comments
		Wed, 16 Mar 2011 12:24:38 +0000
		Banjo
				

		http://customizing-design.net/?p=1336
		
			


















]]>
			http://customizing-design.net/2011/03/16/%E3%82%B3%E3%82%B3%E3%83%AD%E3%81%82%E3%81%A3%E3%81%9F%E3%81%BE%E3%81%A3%E3%81%9F%E6%AD%8C/feed/
		0
		
		
		WordPressサイトをメイリオフォントに変更してみよう！
		http://customizing-design.net/2011/03/01/meiryo/
		http://customizing-design.net/2011/03/01/meiryo/#comments
		Tue, 01 Mar 2011 12:04:09 +0000
		Banjo
				
		
		

		http://customizing-design.net/?p=1309
		続きを読む →]]>
			■Twentytenのフォントを変更した場合

 


・style.cssを変更する

wp-content→themes→twentyten→style.cssを選択。


font-family: Georgia, "Bitstream Charter", serif;





 


↑コチラに


 


font-family: 'メイリオ',Meiryo, Georgia, "Bitstream Charter", serif;




 


↑これを追加します。


 


すると・・・

メイリオフォント

かわいいいい感じになりました！

簡単ですね！


 

]]>
			http://customizing-design.net/2011/03/01/meiryo/feed/
		3
		
		
		文字を集めて絵に！
		http://customizing-design.net/2011/02/26/%E6%96%87%E5%AD%97%E3%82%92%E9%9B%86%E3%82%81%E3%81%A6%E7%B5%B5%E3%81%AB%EF%BC%81/
		http://customizing-design.net/2011/02/26/%E6%96%87%E5%AD%97%E3%82%92%E9%9B%86%E3%82%81%E3%81%A6%E7%B5%B5%E3%81%AB%EF%BC%81/#comments
		Fri, 25 Feb 2011 15:02:55 +0000
		Banjo
				

		http://customizing-design.net/?p=1187
		
			


JUAN OSBORNE – The Scream
 http://www.juanosborne.com/2010/06/the-scream/

]]>
			http://customizing-design.net/2011/02/26/%E6%96%87%E5%AD%97%E3%82%92%E9%9B%86%E3%82%81%E3%81%A6%E7%B5%B5%E3%81%AB%EF%BC%81/feed/
		0
		
		
		WordCamp Fukuoka2011 Banjo プレゼン資料
		http://customizing-design.net/2011/02/26/wordcamp-fukuoka2011-banjo-%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99/
		http://customizing-design.net/2011/02/26/wordcamp-fukuoka2011-banjo-%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99/#comments
		Fri, 25 Feb 2011 15:01:15 +0000
		Banjo
				
		

		http://customizing-design.net/?p=1274
		続きを読む →]]>
			WordCamp Fukuoka Banjo

 


WordCamp Fukuoka 2011



 


WordPressのマニュアルサイト



 


Photo Gallary


43_large
59_large
60_large
87_large
5468297295_7cc189cdcd_b
5468300381_ecd86acf2d_b


 

]]>
			http://customizing-design.net/2011/02/26/wordcamp-fukuoka2011-banjo-%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99/feed/
		1
		
		
		Mac Keynote 使い方　マニュアルサイト
		http://customizing-design.net/2011/02/06/mac-keynote-%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%80%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88/
		http://customizing-design.net/2011/02/06/mac-keynote-%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%80%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88/#comments
		Sat, 05 Feb 2011 16:17:52 +0000
		Banjo
				
		

		http://customizing-design.net/?p=1256
		続きを読む →]]>
			

iWorksを買いました。
 Keynoteは最高に楽しいソフトですね。


 



 



Keynoteマニュアル



 



 


]]>
			http://customizing-design.net/2011/02/06/mac-keynote-%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%80%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88/feed/
		0
		
		
		WordPressのページナビゲーションプラグインの導入方法
		http://customizing-design.net/2011/02/02/wp-pagenavi/
		http://customizing-design.net/2011/02/02/wp-pagenavi/#comments
		Wed, 02 Feb 2011 12:24:39 +0000
		Banjo
				
		

		http://customizing-design.net/?p=1230
		
			


導入方法はコチラのサイトから



 


 

]]>
			http://customizing-design.net/2011/02/02/wp-pagenavi/feed/
		0
		
		
		WordPressの電子書籍はコレ！
		http://customizing-design.net/2011/02/02/wordpants/
		http://customizing-design.net/2011/02/02/wordpants/#comments
		Wed, 02 Feb 2011 12:17:23 +0000
		Banjo
				
		

		http://customizing-design.net/?p=1231
		
			


実際のサイトを見る



 


 

]]>
			http://customizing-design.net/2011/02/02/wordpants/feed/
		0