いろいろ方法があるとは思いますが今回は手っ取り早く、プラグインを使ってsliding panelを作ります。
jqueryの導入は次回に回します。

今回使用するプラグインは→WP-Cycle Plugin

①インストールして有効化。プラグインページの「設定」から初期設定をします。

※画像を入れる前に、「image dimensions]で画像の縦幅・横幅を設定します。

effectはいろいろ用意されています。なんとなく見ればわかると思います。

How does it work in artisteer templete?

これを動かすには、「header.php」に追記をします。

   <div class="art-header"><?php wp_cycle(); ?>

と言う風に、<?php wp_cycle(); ?>を足すだけ。簡単です。

また、ページや記事内に入れたい場合は[wp_cycle]を追加で出来るようです。

以上、3回にわたりヘッダーカスタムをやってきましたが、これでartiteerで作成されるwordpressのテーマも
大きく見栄えを変える事が出来ると思います。

logoをヘッダー外へ移動する

ヘッダーをカスタムする第2段です。

artisteerではデフォルトはヘッダー内にしか、ロゴを置く事はできないです。
あ、できるかもしれませんが、やり方が分かりません。なので。

そもそも、なんでこんな事するかというと、「ヘッダー部分の画像」を、sliding表示したいですからです。
くるくる回る画像の上に、タイトルロゴがあるのはおかしいんではないかい？という所からのカスタムです。

なので、必要のない人には必要ない感じです。

①artisteer作成時に、ヘッダーマージンを大きめに取る。
最大値は200pxです。なので、ご自分のちょうど良い大きさで作成。

前回の同じ、ここからはwordpressで作業です。

style.cssの修正

修正というか追加です。

div.headerobject
{
   display: block;
   left: 0;
   margin-left: -10px;
   position: absolute;
   top: 0;
   width: 600px;
   height : 80px;
   background-image: url('images/header-object.png');
}
/* end HeaderObject */

に追加します。 top: 0;とwidth: 600px;の間に以下を追加。

margin-top:-100px;

‐100pxは自分のちょうど良い数字で。

1回目で良い忘れましたが、wordpressのエクスポートオプション→cssプレフィックスオプションで
｛art-・・・を削除する事ができます。

私の解説ページで、通常は、｛art-headerobjectとなっていないのは、オプションではずしている為です。
そのまま、エクスポーとしている人は、
div.headerobjectの部分にdiv.art-headerobjectと言う風に、”art-”を追加してみてください。

これで、ヘッダーの外へタイトルロゴを追いやる事が出来ました。
こういうの最近多いですよね。

ヘッダーに配置したロゴ画像にリンクを貼る

artisteerはphotoshopなどで作成したロゴなどを、簡単に配置ヘッダー→フォアグラウンド写真などで簡単に配置できて、
とても便利です。
でも、これ、クリックができません。つまり、ただの画像な訳です。
これをクリックできるようにしたいと思います。

①なにわともあれ、画像作成をします。
②フォアグラウンド写真より、「ファイルから」で作成したロゴを選択。
artisteer内に取り込みます。

あとは、いろいろメニューやフッターなんかをいじって、「wordpress　theme」として作成し、
テーマを有効化。

ここからは、wordpress内の「header.php」に修正を加えます。

artisteerはバージョンによって作成されるheader.phpが大きく変わりますので、この記事もそのうち古いものとなるかもしれません。
ちなみに、使用しているバージョンは「Artisteer 3.1 for Windows」です。

header.phpの修正

 <div class="headerobject"> </div>

を

 <div class="headerobject" onclick="location.href='http://your-url/';" style="cursor: pointer;"> </div>

と入れ替えます。

your URLはご自分の「home」などのurlにして下さい。

っていうか、デフォルトでこの機能があってもいいと思うんすけど。

http://wordpress.org/extend/plugins/easy-chart-builder/

導入の簡単な説明です。

ワードプレスに限らず、グラフ作成についてはGoogle Chart APIなども有名ですが、原理は同じだと思います。
パラメータを入力して、出力します。

→原理は同じというか、どうも、Google Chart APIの入力支援プラグインっぽい感じです。

Example

横棒のグラフ

縦棒のグラフ

円グラフ

折線グラフ

など様々なグラフの作成が可能です。
視覚的にも、とても綺麗に仕上がっています。

Installation

まずは、プラグイン「新規追加」で検索。Easy Chart Builder
インストールすると、設定に入ってきます。

Chart Attribute Defaults

Chart Type設定

• horizbar→ 水平の棒グラフ
• vertbar→垂直の棒グラフ
• pie→円グラフ
• line→折れ線グラフ
• horizbarstack→水平グラフ2（グラフ途中に色の変化をもたらす事が出来ます。
• vertbarstack→垂直グラフ2（horizbarstack同様、グラフ途中に色の変化をもたらす事が出来ます。

その他、あと4つほどありますが、検証してませんので、ご自分でやってみてください。

Chart Height,Chart Width

グラフの大きさ、高さ・幅で指定します

その他、色々とあって（割愛・・・）

Hide Data Table,Table Always Open

グラフの下に入力した数値データが、テーブル型で出てきます。
テーブルを隠したい場合はHide Data Tableにチェック。
常にテーブルを表示させておきたい場合はTable Always Openにチェック。

Data Table Title

デフォルトではShow/Hide Table Dataとなっていますが、「数値データを見る」などの表題に変更できます。

詳しくは後で。

この、Chart Attribute Defaultsの下には、グラフの色設定が続きます。

Chart Color Attributes

• Chart Color→グラフの背景色を選択します
• Chart Fade Color→デフォルトではうっすらグラデーションがかかっています。そのfadeの色を選択できます
• Watermark Color→数値を選択した特定の場所に透かしを入れることができます。その透かしの色の選択です。
• Marker Color→マーカーを打つことが出来ます。そのマーカーの色の選択です。

Group Color Attributes

これでグループ化したグラフの色を設定します。

How does it work

まずは実際に作成した画面です。

demo site

cさん激やせです（笑）グラフ下にあるshow/hide tabledataをクリックすると、テーブルデータとして数値が出てくると思います。
これは、ページまたは、投稿の編集画面に以下のパラメータを入力しています。

[easychart type="line" height="100" width="150" title="Aさん,Bさん,Cさんの体重推移表" groupnames="Aさん,Bさん,Cさん" valuenames="5/1,5/5,5/9,5/13,5/17,5/21,5/25,5/29" group1values="69,72,75,81,83,84,86,91" group2values="55,58,69,65,62,58,55,52" group3values="90,85,83,81,75,71,68,60" ]

パラメータの説明

詳しくは作成者のページを見てもらうのが一番分かりやすいです。こちら　dyerware

なので、私が作成したグラフのパラメータだけ説明。

• easychart type=”line”　→今回使用したグラフはline（折れ線グラフ）です。
• height=”100″ width=”200″ →グラフ大きさ
• title=”Aさん,Bさん,Cさんの体重推移表”→グラフの題名
• groupnames=”Aさん,Bさん,Cさん”→各自の名前
• valuenames=”5/1,5/5,5/9,5/13,5/17,5/21,5/25,5/29″ →今回は曜日動向
• group1values=”69,72,75,81,83,84,86,91″→体重数値
• group2values=”55,58,69,65,62,58,55,52″→体重数値
• group3values=”90,85,83,81,75,71,68,60″→体重数値

簡単ですが、いくつか注意点があります。

記述する際の注意点

• パラメータは数値を”100″というように”で囲む[easychart type=“line” height=“100″ width=“150″ title=“Aさん,Bさん,Cさんの体重推移表”
• 数値と次のパラメータは必ず半角空ける（空けないと読み込みません）[easychart type=”line” height=”100″←”line”とheightの部分
• だからといって、無駄な改行をしない。なので、brBrbrなどの強制改行プラグインが入っていると思うように行かない時があるかも。（勝手に
  とか入るので）

ちなみに以前のバージョンでは、テーブルデータで使用する日本語がバグっていましたが、作成者の方に連絡をして、修正して頂きました。
感謝！

用途は幅広く使用できるプラグインだと思います。ぜひ、お試しあれ。

別にこれでもいいんですけど。

変更箇所

「外観」→「テーマ編集」よりfunctions.phpを修正します。

if (!function_exists('theme_get_excerpt')){
	function theme_get_excerpt($args = array()) {
		global $post;
		$more_tag = theme_get_array_value($args, 'more_tag', __('Continue reading →', THEME_NS));
		$auto = theme_get_array_value($args, 'auto', theme_get_option('theme_metadata_excerpt_auto'));
		$all_words = theme_get_array_value($args, 'all_words', theme_get_option('theme_metadata_excerpt_words'));
		$min_remainder = theme_get_array_value($args, 'min_remainder', theme_get_option('theme_metadata_excerpt_min_remainder'));
		$allowed_tags = theme_get_array_value($args, 'allowed_tags',
			(theme_get_option('theme_metadata_excerpt_use_tag_filter')
				? explode(',',str_replace(' ', '', theme_get_option('theme_metadata_excerpt_allowed_tags')))
				: null));

238行目の$more_tag = theme_get_array_value($args, ‘more_tag’, __(‘Continue reading &rarr;‘, THEME_NS));
の中見を変更します。

$more_tag = theme_get_array_value($args, 'more_tag', __('

‘, THEME_NS));

画像は当然つくっておいてくださいね。

あとはCSSで位置をいじり完成。
少しでかくしてみました。

 Featured Imagesのサイズ変更ができない

アイキャッチ、海外ではFeatured Imageって呼ばれています。
このブログのように、「home」で新着情報一覧をサムネイル表示と共にしようと試みましたが、どうにもアイキャッチの画像の大きさが変更できん。
何でだろうと調べ、解決に至りましたので、紹介。

「外観」→「theme　options」→「Featured Image」でサイズ変更してもサイズが変更されませんでした。
デフォルトの150×150？125×125？からまったく変化なし。

めまぐるしい勢いでバージョンアップをしているwordpressに常に対応させて行くのは、とても大変な事なんでしょう。
その中で、artisteerでも対応が出来なくなってきているんでしょうか。
っていうか自分だけ？

以下は、使用しているartisteer、wordpressでも大きく変化しているようなので、これはあくまで自分が使用している環境です。

• Artisteer 3.1 for Windows
• WordPress 3.3

content-page.phpとcontent-single.phpに変更を追加

まずは、「外観」→「テーマ編集」からcontent-page.phpとcontent-single.phpに修正を加える。

content-page.php

'id' => theme_get_post_id(),
'class' => theme_get_post_class(),
'title' => theme_get_meta_option($post->ID, 'theme_show_page_title') ? get_the_title() : '',
'heading' => theme_get_option('theme_single_article_title_tag'),
'before' => theme_get_metadata_icons('', 'header'),
'content' => theme_get_content()

の中を注目、’before’と’content’の間に以下の1行を追加します。

'thumbnail' => theme_get_post_thumbnail(array("size" => array(300, 150))),

array(300,150))),は(画像の横幅300,画像の縦幅150))),ここら辺はお好きなように。同様に、content-single.phpにも追加します。
その後は、「外観」→「theme　options」→「Featured Image」で、
「Use featured image as thumbnail」にチェックを入れて下さい。

修正後、再度、アイキャッチを削除して入れ直すと無事入りました。

サイズ、がちゃんと修正されていますな。

この修正により、homeの情報一覧画面で出ていた、アイキャッチが個別の記事欄でも出現します。

この件に関して、詳しい解説をしているページがUsing Featured Images in WordPress Websites。

artisteerを使用していて同じような状況になっている方は是非、試してみてください。

んで、この「Wp　to　top」というプラグインで実装できます。

http://wordpress.org/extend/plugins/wp-to-top/installation/

プラグインの新規追加で「Wp　to　top」でもインストールできます。
使い方はカンタン。

• text show　・・・表示される文字（デフォルトはback to top)
• Back ground color ・・・文字通り、背景色です
• Foreground color ・・・文章の色
• show only in post…のチェックを外すと、すべてのページ表示されます

画面下の方に出てきましたか？
ユーザビリティを考えると、この手のプラグインは便利。

いわゆるこんな感じですね。

サムネイルと記事の表示はまた次回にまわします。

これを記事のcolumn幅で2列表示させたいと思います。

こちらは、wordopress英語版のフォーラムに記載されておりました。

<table cellpadding="10" cellspacing="10" >
<table width="750px">
 <?php  query_posts('cat=21&showposts=4'); //表示数と、カテゴリー名 ?>
<?php
$col = 0;
$cols_per_row = 1;
while (have_posts()) : the_post();
  if($col == 0) echo '<tr>';
  ?>
  <td class="column'<?php echo $col; ?>" style="vertical-align: top">
  <div class="post" id="post-'<?php the_ID(); ?>'">
	<div class="title" ><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></div>
	<div class="descr"><?php the_time('Y/m/d') ?></div>
	<div class="entry">
	<?php the_excerpt(); ?>  

	</div>
  </div>
  <td>
  <?php
  if($col++ >= $cols_per_row){
	$col = 0;
	echo '</tr>';
  }
endwhile;
?>

</table>

①table width=”750px”←はご自分の記事のテーブル幅

②?php  query_posts(‘cat=21&showposts=4′);←は表示させたいカテゴリーIDと見せたい記事数。2列なので偶数が良いでしょう。

③$cols_per_row = 1;←こちらの数字でカラム数を変えます。「0」であれば、1列表示、「1」であれば2列表示になります。

④  <?php the_excerpt(); ?> でサムネイル表示させます。詳しくは次回。

.columns{
overflow:hidden;

}
.columns .column{
float:left;
width:33%;
}
.title{
        font-size: 17px;
        text-decoration:none;
        background:#eee;
        border-left:7px solid #400040;
        padding:.3em .9em
    }  

.descr{
       font-size: 15px;
       padding:.3em
    }

ｃｓｓは上のモノです。

これでこんな感じに。

なりました。

すこし他とは変わったカタチで記事一覧を表示させたい時には良いですね。
topページを新しく作成して、ダラ~っと一列で表示させたくない時なんかに良いです。

では先ほど作ったモノを特定のカテゴリーにだけ反映させたい場合はどうしましょう。

<?php query_posts(‘cat=22&showposts=50&order=asc’); ?>でIDの22にだけなったんじゃねえのか？

ただ④のコードを「どこに書いたらいいの？」という方の為に。
例えばサイトのトップにこの「製品一覧」を表示させたい場合は、
（他にも色々なバナーや、新着情報を表示させたい）なんていう事もありますので、

新たに、toppage用のテンプレートを作って入れてやると思います。

しかし、単一記事の投稿(single.php)に入れてしまうと、すべての投稿のカテゴリーで、こやつが表示されてしまいます。
会社のホームページなんかを作るときは、
①商品
②会社のnews
③従業員さんのブログ

などを、「投稿」に入れますよね。
前回の③で作ったようにもう一つ別のsingle.phpを作ればいいんですが、

今回は同じように、
category.phpをもう一つ作ってやります。
これにより、①商品だけを複数列表示できるようにします。

category.phpに関してはwordpress　codexを参照してください。

まず、wordpressはcategory.phpに関して、読み込みの優先順位があります。

category-news.php

category-6.php

category.php

archive.php

index.php

つまり、(category-news.php のような) category-slug.php が存在しなければ、WordPress は category-6.php を探します。

上記は、codeｘよりですが、通常、category.phpしかテーマの中には無い状態だと思います。

なので、新たなcategory.phpを作ります。

テーマの中にある、category.phpをコピーして、別の名前を付けます。
④で作ったコードにはID=22 （商品のcategory　ID）でしたので、
category-22．phpとして、取り込みます。
その中に④で作ったコードを入れます。

そうすれば、商品（ID=22）のみ、一覧表示になります。

これを「カスタム投稿タイプで作成したカテゴリーに反映させたりして表示させれば、商品一覧ができあがり。
いろいろなやり方がありますがお試しください。

前回の③からビタ~ッと止まっておりました、「会社の製品一覧を作るシリーズ」を再開したいと思います。
PHPもよくわからんワタシが書いている記事なので、説明不足あればご容赦を。

会社の出している商品を↓のように一覧で出す方法です。

そしてgoogle先生で検索。

http://dejavu-i.com/blog/1684さんの大変分かりやすいページがヒットしました。
ものすごく分かりやすく書いてらっしゃるので、こちらの方が参考になります（笑）
カートプラグイン、「welcart」を使用しての一覧表示のさせ方です。

と言う事で、忘れない為に。

これについては色々な方法があると思いますが、ワタシはこちらを採用。
①まず商品が入っている「投稿」のカテゴリーIDを確認します。（商品って流動性があるならば、投稿に入れてますよね？もしくは色々増えて行く時とかは・・・）
以下のコードを入れます。

<h4>Cotton cloth</h4>
<?php query_posts('cat=22&showposts=50&order=asc'); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); usces_the_item(); ?>
<div class="thumbnail_box">
    <div class="thumimg"><a href="<?php the_permalink() ?>"><?php usces_the_itemImage($number = 0, $width = 150, $height = 150 ); ?></a></div>
    <div class="thumtitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php usces_the_itemName(); ?>&nbsp;(<?php usces_the_itemCode(); ?>)</a></div>
<?php if (usces_is_skus()) : ?>
    <div class="price">&yen;<?php usces_the_firstPrice(); ?><?php usces_guid_tax(); ?></div>
<?php endif; ?>
</div>
<?php endwhile; else: ?>
<p><?php _e('商品がありません'); ?></p>
<?php endif; ?>

h4～は名前ですね。
そのあとの<?php query_posts(‘cat=商品が入っているカテゴリーID&showposts=見せたい商品数&order=昇順です’);?>
ご自分でアレンジで。
($number = 0, $width = 150, $height = 150 );に商品のサムネイルが出ますが、縦・横の大きさです。

これは、製品一覧でなくても活用できるコードですね。
「サムネイルを中心に投稿記事を3段にしてみたい」なんて時に一覧にするコードです。

ここまでやって、こうなるかと思います。↓

そう。これが下までダラ~っと！（表示させた記事分）

これをCSSで横並びにしてやります。
あまり意味が無いものも入っているとは思いますが、入れたCSSがこちらです。

/* thumbnail_box */
.thumbnail_box {
	width: 160px;
	height: 190px;
	margin: 4px 0px 0px 4px;
	padding: 8px;
	background-color: #18151e;
	float: left;
       overflow: hidden;
}
.thumimg {
        float: left;
	padding: 3px;
	border: 1px solid #CCCCCC;
	text-align: center;
}
.thumtitle {
width: auto;
	margin: 10px 5px 5px 0px;
	padding: 0px;
	background-position: left 2px;
	text-indent: 20px;
}

 .thumtitle a {
	text-decoration: none;
	white-space: normal;
	word-wrap: break-word;
}
.thumbnail_box .thumtitle a:hover {
	font-weight: bold;
}

そうすると・・・・
出ましたか？

当然これはみなさんが使っているテーマの幅で列数が変わりますので、その辺はCSSをいじって下さい。
あと、サムネイルの大きさなんかも・・・

そんでもってこれを、どうやってどこに表示させるのか？
次回また・・・・