ホーム > タグ > css

css

【進行中】シンプルなイラストサイト向けにVicunaテーマをカスタマイズ

イラストサイト運営に、wp.Vicunaテーマをカスタマイズして使用するという魂胆。

wp.Vicunaは、WordPress専用のテーマです。サイト構築時にベースとして利用できる超汎用テンプレートとして、シンプルなHTML構成と柔軟性の高い専用のCSSスキンを用意しています。

全部のサイトにカスタムしたvicunaテーマつかってます。
参考：Vicuna CMSテーマカスタマイズ＋wordpressプラグイン使用一覧メモ – みついれ＠うぇぶろぐ
問題は、wp.Vicunaかwp.Vicuna Extかwp.Vicuna Ext. Customどれ使ってたかだ…！

wp-contentsのthemeにアップロード

どうやらwp.Vicuna Ext使ってた模様。うーんでも今回wp.Vicuna更新したしそっちつかってみたいんだけどなー(´ρ｀)
vicunaだとphpを直接いじってレイアウトかえますけど、（wp.Vicuna – レイアウトの変更）extだとプラグインのように編集画面でいろいろ変えられます。

現在カスタマイズ可能な項目一覧
スキンの切り替え
表記言語の切り替え
Eye Catchの切り替え
グローバルナビゲーションの表示切り替え
各ページ毎のレイアウト設定
Widgetによるサイドバーのカスタマイズ

ma38su.org – wp.Vicuna Ext
まあいいや…更新した新vicunaつかってみる！
wp.Vicuna – 本体の入手と設置手順　DLして解凍してうｐしてphpファイルの属性を666にかえる。
マルチ化してる場合はファイル名を変えて共存させる。
スキンが他にもあるのでそっちもうｐしてみるー　wp.Vicuna – CSSスキン
好みでflatを選択。wp-themeにうｐして属性ｒｙ

vicuna phpをいじってレイアウトかえてくよー

ここがvicunaのオススメポイント　wp.Vicuna – レイアウトの変更

Vicuna CMSで配布しているスキンは、body要素に付加されるクラス名によってレイアウトが変わる仕組みになっています。Vicuna テーマ・マネージャーを利用することで、wordPressの管理画面からスキンの対応する好みのレイアウトに簡単に変更することができます。

ということで早速イメージにあったクラス名を選択して挿入

<body class="mainIndex single eye-h">

どんどん変えていきます。
ちなみにテンプレートは

  1. ヘッダー (header.php)
  1. メインインデックスのテンプレート (index.php)
  2. ページテンプレート (page.php)
  3. アーカイブ (archive.php)
  4. カテゴリーテンプレート (category.php)
  5. タグテンプレート (tag.php)
  6. 検索結果 (search.php)
  7. 404 テンプレート (404.php)
  8. 単一記事の投稿 (single.php)
  1. コメント (comments.php)
  • サイドバー (sidebar.php)
  • フッター (footer.php)
  • テーマのための関数 (functions.php)

    • これにスタイルシート (style.css)で装飾していきます。

    グローバルナビゲーション挿入するよー

    これは手動でglobalnavi.phpをつくって挿入したいテンプレートへ

    <?php include (TEMPLATEPATH.'/globalnavi.php'); ?>

    を入れる。
    中身はこんな感じ

    <ul id="globalNavi"><li><a href="<?php bloginfo('url'); ?>/guide" title="guide：ガイド・このサイトについて">guide</a></li>
<li><a href="<?php bloginfo('url'); ?>/memo" title="memo：お知らせとか日記とか">memo</a></li>
<li><a href="<?php bloginfo('url'); ?>/img" title="img：絵">img</a></li>
<li><a href="<?php bloginfo('url'); ?>/offline" title="offline:通販・イベント情報">offline</a></li>
<li><a href="<?php bloginfo('url'); ?>/bkm" title="bkm:ブクマ">bkm</a></li>
<li><a href="<?php bloginfo('url'); ?>" title="index：インデックス・最初のページ">index</a></li>

    グローバルナビゲーションをページ最上部に移動します。

    <body class="mainIndex double gt>

    サイドバー編集

    ごちゃごちゃしてるので最近のpostだけにしとく

    	<dt><?php _e('Recent Entries', 'vicuna'); ?> --<a href="/tag" title="tags/記事一覧">All
<?php $numposts = $wpdb->get_var("SELECT count(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'");
if (0 < $numposts)
     $numposts = number_format($numposts);
echo $numposts.' posts.';
?>  </a></dt>
<dd class="recentEntries">
			<ul><?php
$lastposts = get_posts('numberposts=10&orderby=post_date');

foreach($lastposts as $post) :
    setup_postdata($post);
    ?>
                <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> -<?php the_time('m/d'); ?></li>
<?php endforeach; ?></ul>

		</dd>

    ここで、全記事表示のための頁　tag　ぺーじを生成する。
    あとでDagon Design Sitemap Generatorプラグインで全部表示するー

    <!-- ddsitemapgen -->

    DDDSGの日付表示は　Y-m-d　が好きだな

    フッターにカウンター

    conterizerⅡを改造してカウンター入れます。
    (footer.php)いじる

    <?php counterize_add();?>Y:<?php echo number_format(counterize_gethitsyesterday()); ?>/<?php echo number_format(counterize_getuniquehitsyesterday()); ?> T:<?php echo counterize_gethitstoday(); ?>/<?php echo counterize_getuniquehitstoday(); ?> all[<?php echo counterize_getamount(); ?>/<?php echo counterize_getuniqueamount(); ?>]

    ちなみにconterizerⅡはマルチ化している場合ネットワークで有効化せずに
    各々のWPで有効化しないとテーブル生成しないらしく動きませんでした。びびった

    ページのコメント欄を削除

    (page.php)でコメントのphpを削除

    <?php comments_template(); ?>

    ※追記あり

    外部リンク

    続きを読む

    Vicuna CMSテーマカスタマイズ＋wordpressプラグイン使用一覧メモ

    本拠地から移動　追記していきます

    Vicuna CMSテーマいじりメモ

    1. index.php
    2. single.php
    3. tag.php
    4. archive.php　category.php
    5. sidebar.php
    6. footer.php
    7. core.css
    index.php　↑menu
    1. コメント・トラックバックdel
    2. info欄いくつかdel
    3. twitter
      4. <div class="section entry"><h2 class="sidebar-title"><a href="http://twitter.com/mi2maru" title="twitter">twitter：mi2maru</a></h2>
<ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mi2maru.json?callback=twitterCallback2&amp;count=3"></script>
</div>
    4. ※全てのファイルにglobalnavi.php挿入
      5. <?php include (TEMPLATEPATH.'/globalnavi.php'); ?>
    5. vicuna_pagingの位置を弄る、achive.phpとcategory.phpも
    6. 特定カテゴリをindexに非表示　88はカテゴリ番号
      7. <?php while (have_posts()): the_post()?><?php if (in_category('88')) continue; ?>

      参考：特定のカテゴリのみ除去して表示 or 特定のカテゴリのみ表示する方法 » WPカスタマイズ講座

    single.php　↑menu
    1. タイトル横に　<?php edit_post_link(‘*’, ”); ?>　で編集ボタン
    2. pvとレーティング　あとで企画とかに使おうかなーとか
    3. infoを下に移動
    4. カテとtagを下に独立
      5. <ul class="flip">
				<?php the_tags('<li class="tags"><a href="http://mi210.com/tag/" title="tags一覧">tags</a> : ', ' | ', '</li>')?>
<li class="category">category : <?php the_category(' | ') ?></li>
			</ul>
    5. similar_posts導入で　<?php similar_posts(); ?>　挿入
    6. カテゴリ内で前後記事移動
      7. 			<ul class="flip" id="flip2">
				<li class="newer">older : <?php previous_post_link('&laquo; %link', '%title', 'true') ?>｜<?php the_category(' | ') ?>｜<?php next_post_link('%link &raquo;', '%title', 'true') ?> : newr</li>
			</ul>
    7. 上の前後記事移動をoldとnew逆に
    tag.php　↑menu
    1. tag一覧挿入
      2. <h2>Tags</h2>
<p>
<?php wp_tag_cloud('smallest=8&largest=22&number=0&orderby=name'); ?>
</p>
    tags.php　作成、tagクラウドページ作成
    1. page.phpをダウンロードして文頭に以下
      2. <?php /*
Template Name: Tag cloud Archive
*/ ?>
    2. カテゴリーにもtag追加
    3. 画像表示
    archive.php　category.php　↑menu
    1. reactionを削除
    sidebar.php　↑menu
    1. 最近の投稿を左に　日付つける 
      <?php wp_get_archives('type=postbypost&limit=10'); ?>　

      を

      <?php
$lastposts = get_posts('numberposts=10&orderby=post_date');

foreach($lastposts as $post) :
    setup_postdata($post);
    ?>
                <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> (<?php the_time('Y-m-d'); ?>)</li>
<?php endforeach; ?>

      参考wp.Vicuna のサイドバーの最新記事に投稿日を表示 – べたろぐ。

    2. ページ表示削除
    3. 最近の投稿に全記事数表示、mapページへリンク
      4. 		<dt><a href="http://mi210.com/news/log"><?php _e('Recent Entries', 'vicuna')?></a> - <a href="http://mi210.com/tag"><?php $numposts = $wpdb->get_var("SELECT count(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'");
if (0 < $numposts)
     $numposts = number_format($numposts);
echo $numposts.' posts.';
?> </a></dt>
		<dd class="recentEntries">
			<ul><?php wp_get_archives('type=postbypost&limit=15&format=html'); ?></ul>
		</dd>
    4. 画像表示
    5. sitemapを手動で挿入

      6. 参考：WordPressをちょちょいと使いやすくする15のスニペット

    6. twitter表示 
      ?php tweetNow("u_name"); ?>
    footer.php　↑menu
    1. Counterize用のphp挿入
    2. ©　年号
      3. <?php echo date('Y'); ?>
    3. [JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
      4. <script type="text/javascript" src="あどれす/js/ps/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="あどれす/js/ps/jquery.page-scroller.js" charset="utf-8"></script>
</body>
    4. ログインアウト
      5. <?php wp_register()?>
				<li><?php wp_loginout()?></li>
<?php wp_meta()?>
    5. google Analyticsトラッキングコード埋め込む（weblog）
    css　↑menu
    style-monoのcore.cssに以下追記
    背景画像ランダム変更　文字色薄く 

    body {
	color: #808080;
	background-color: #ddd;
	background-image:url(images/bg/rotator.php);
	background-attachment: fixed;

}

    参考CSSのバックグラウンド画像をランダムに表示してみる | DesignWalker
    globalNaviの画像リンク表示調整

    ul#globalNavi li.img a {
	border: none;
	padding: 9px 0px;
	display: block;
	position: relative; /* for IE6 */
	color: #333;
	background-color: #fff;
	text-decoration: none;
}

    画像センター表示とか枠線消すとかいろいろ

    /* image
---------------*/
img.sougo {border-width: 2px;
	border-color: #ff3399;
	border-style: solid;
    }
img {border:none;}
img.aligncenter {
	display: block;
	border:none;
    margin:10px auto;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}

    文字色とか細かいの

    a:link {
	color: #ff3399;
}

a:visited {
	color: #ff9999;
}

a:hover {
	color: #555;
	text-decoration: none;
}
em {
	font-weight: bold;
	font-style: normal;
		color: #ff3399;
}

strong {
	font-size: 150%;
	color: #ff3399;
}

    イタリック追加　(mi210.com)

    span.italic {
   font-style: italic; /* イタリック体 */
}

    AddQuicktagに<span class="italic"></span>
    参考：斜体とイタリック体は違うのか – スタイルシートTIPS ふぁくとりー

    画像インライン

    /* ul.links
---------------*/

ul.links {
	margin: 1 0 1;
	padding: 0;
	border: none;
	line-height: 1;
	list-style-type: none;
	background-color: #fff;
}

ul.links li {
	margin: 3 1;
	padding: 9px 5px;
	display: inline;
	text-align: center;
}
ul.links li img.sougo {
	margin: 0;
	padding: 0;
	display: inline;
	text-align: center;
}

    リスト行間とか（ddにも）

    li {    margin: 0.5em 0;
　　　padding: 0;/*リストとリストの間隔調整*/
       line-height: 1.4; /*リストの行間調整*/
}

    ameさんからアドバイスいただいきました！
    行間字間調整

    div.textBody p {
	line-height: 1.7;
	/*\*/
	letter-spacing: 0.1em;
	/**/
}

    参考：wordpress画像の回り込みCSS設定 | ロゴとWEBデザインならD-31N.COMデザインスタジオ
    種まきびとブログ » WordPress

    過去めも

    1. Tweet This!を記事したにリンク。twitterにURL1を投稿します。うほっ！
      仕組みはhttp://twitter.com/home?status=読んでる <パーマリンク呼出し>“のアドレスにリンク張るだけという。しらんかった…

    プラグインなど

    Counterize II
    カウンター。
    ＋α　counterize.php　に以下の関数

    # Returns amount of hits yesterday
function counterize_gethitsyesterday()
{
	$today = date("Y-m-d");
	$yesterday = date("Y-m-d",strtotime("-1 day"));
	$sql = "SELECT COUNT(1) FROM ".counterize_logTable()." WHERE timestamp >= '$yesterday' AND timestamp < '$today'";
	$wpdb =& $GLOBALS['wpdb'];
	return $wpdb->get_var($sql);
}
# Returns amount of unique hits yesterday
function counterize_getuniquehitsyesterday()
{
	$today = date("Y-m-d");
	$yesterday = date("Y-m-d",strtotime("-1 day"));
	$sql = "SELECT count(DISTINCT ip) FROM ".counterize_logTable()." WHERE timestamp >= '$yesterday' AND timestamp < '$today'";
	$wpdb =& $GLOBALS['wpdb'];
	return $wpdb->get_var($sql);
}
# Returns amount of unique hits total
function counterize_getuniquehitstotal()
{
	$sql = 'SELECT count(DISTINCT ip,date(timestamp)) FROM ' . counterize_logTable();
	$wpdb =& $GLOBALS['wpdb'];
	return $wpdb->get_var($sql);
}

    表示したいところに以下のタグ

    <?php counterize_add();?>
Yesterday:PV<?php echo number_format(counterize_gethitsyesterday()); ?>/uniq<?php echo number_format(counterize_getuniquehitsyesterday()); ?>
Today:<?php echo counterize_gethitstoday(); ?>/<?php echo counterize_getuniquehitstoday(); ?>
total[<?php echo counterize_getamount(); ?>/<?php echo counterize_getuniqueamount(); ?>]

    参考：Counterize II でWordPressにカウンタを表示する

    SyntaxHighlighter Evolved
    コード表示
    WordPress › SyntaxHighlighter Evolved « WordPress Plugins
    [記述したい言語]と書いた直後に表示させたいhtmlソースをベタ書きして、最後に[/記述したい言語]と記述

    注意

    テーマファイルのheader.phpの</head>の前に、必ず<?php wp_head(); ?>という記述を加えなきゃいけません（じゃないとこのプラグインは動きません）。
    同様に、footer.phpの</body>の前にも、<?php wp_footer(); ?>という記述

    何故か既にされてたのでおｋ
    参考：ITキヲスク | WordPressでプログラムコードを綺麗に表示させるプラグイン「SyntaxHighlighter Evolved」

    Top Level Categories
    WP-PostViews　WP-PostRatings
    pixivみたいにPVとレーティング　

    <?php if(function_exists('the_views')) { the_views(); } ?>
</li>
<li><?php if(function_exists('the_ratings')) { the_ratings(); } ?></li>
    similar_posts
    似てる記事を抽出
    Other SettingsのRelative importance of:をcontent: 50 % title: 20 % tags: 30 % にする
    WP-PostViews　WP-PostRatings
    pixivみたいにPVとレーティング　
    WP-Footnotes
    脚注
    ktai-style
    ケータイ変換

    1. footer.php　一番下にindexへリンク・counterize_add
    2. header.php　34行目から以下削除2
      3. if (ks_is_flat_rate()) {
$before = sprintf(‘<div align="center"><img src="%stitle1%s.gif" alt="" /><h1%s>’, ks_theme_url(KTAI_NOT_ECHO), $logo_ext, $h1_style);
$after = sprintf(‘</h1><img src="%stitle2%s.gif" alt="" /></div>’, ks_theme_url(KTAI_NOT_ECHO), $logo_ext);
} else {
$before = ‘<h1 align="center">’;
$after = ‘</h1>’;
}

ks_page_title(array(‘before’ => $before, ‘after’ => $after));
    simple tags
    タグ管理
    WordPress Database Backup
    バックアップ　メールで定期的にするよう設定
    WP-PageNavi
    ページ番号がわかりやすい
    WP Slimbox2
    ライトボックス表示。自動的で便利。※セッティングに色々ある忘れない
    Dagon Design Sitemap Generator
    記事一覧生成。以下表示したいところに挿入

    <!-- ddsitemapgen -->

    日付表示は　Y – m – d (h:i)　にしました。
    エラー参考：Cafetish's Blog» WordPressをアップグレードするとサイトマップが表示されなくなる

    XXX Smooth Scroll to Anchor
    ページをスム～ズ移動　※バッキングするため停止中
    参照：jQueryでページ内リンクをスムーズスクロールする
    Custom Query String Reloaded
    記事ページ表示数調整

    is_home Show 3 posts per page, ordered by date DESC
    is_paged Show 5 posts per page, ordered by date DESC

    参考：power source* » WP plugin: ページ種類別に記事表示数・順序を変える – Custom Query String Reloaded

    Random Image
    最近の画像サイドバー　<?php randomimage(); ?>
    オプションに　style="height:50px;"
    WordPress.com Stats
    アクセス解析
    batch-categories
    タグ・カテゴリ変更追加を一括操作
    WP-No-Format
    wordpressによる整形改変防止
    Kazさんにおしえてもろた！
    AddQuicktag
    タグ追加

    参考
    投稿画面にクイックタグボタンを追加するプラグイン[WP] – ミblog : レビューや日常など
    WP-AddQuicktag 日本語リソース同梱版 « MOMENTS

    ついったなう
    ついったー表示する！
    さくらちろ｜wp-plugin
    TaM Google Analytics
    Google Analyticsコード埋め込み
    WP Hyper Response
    高速化
    WordPressを高速化するプラグインを作りました :: Stocker.jp / diary
    WP Tweet Button | When Minds Collide
    tweetボタン設置
    Shutter Reloaded
    画像表示をライトボックス風味に。他のプラグインまじバッキングして死
    Faster Image Insert
    画像読み込み早くする
    Delete-Revision
    リビジョンを自動削除

    まだふえる

    1. ところでURIとURLって主体の違いなのかなわからん [↩]
    2. タイトルuzeeeeee [↩]

    Tags

    【未解決】 さくらのレンタルサーバー はてブ シェルスクリプト タグ 正規表現 素材 背景 -便利tool -追記アリ .htaccess @珀夜 Counterize II cron css DNS error GAE MovableType4 php pixiv plugin RSS stacc.me twitter twitter-bot VALUE DOMAIN vicuna vista Windows Update WordPress xrea Yahoo! Pipes

    ホーム > タグ > css

    検索
    Sitemap
    タグクラウド
    twitter：mi2maru

    みつ。また一つ賢くなったまとめ 紙が更新されました！ http://t.co/nzt0ygNJ ▸ 本日トップニュースを提供してくれたみなさん： @cohtan @yamasei @necolt @moto_akitom0 @tairant大体1時間前

    最近の投稿 - 20 posts.
    アーカイブ
    twitter：mi2maru
      あわせて読みたいブログパーツ
      フィード
      メタ情報

      ページの上部に戻る