普通のサラリーマンのiPhone日記 Rotating Header Image

WordPressで触ったcss & php等(11/15現在)

2009年11月15日 11時現在でメンテしているWordPressのcssやphpの一覧になります。頻繁に修正してるので備忘を込めて整理しておきます。バージョンUPをする時には、修正ファイルを必ずバックアップ取っておこう…。という自らへの戒めを込めて(;^ω^)

テーマ(PrimePress)
開く度にトップ画像が切り替わる点。サイドバーの幅が広く使い勝手が良さそうな点。これが気に入って採用しました。ただ、このテーマの作者様のファイル構成(phpやcss等)は、若干マニアックなところもあり、カスタマイズは逆に苦労してます…。

091115b_1

スタイルシート(style.css)の修正箇所
サイト全体のフォントを大きくしました。該当箇所を変更するだけで全体が変わります。こういう細かい部分の場所を探すには、FirefoxのFirebugというAdd-onが最適で、ここかな?と思った場所で要素を調査すれば、HTMLの場所や使ってるCSSの場所が特定できます。ちょ?便利です。

table, caption, tbody, tfoot, thead, tr, th, td 
{margin:0; padding:0; border:0; outline:0;
font-size:100.5%;
vertical-align:baseline; background:transparent;}

iPhone画像を2枚横並びに貼り付けた時にマージンを設定するようにしました。*で始まる部分は、IE用のマージンとしてます。IEだった場合にレイアウトが崩れるので…。

/*-----images*/
.entry-content img{max-width:100%; height:auto;
margin-right: 5px; *margin-right: 0px; }

コメントのフォントサイズを大きくしました。

.commentlist p {margin:1.4545em 5px 1.4545em 0;
font-size:1.2em;
line-height:1.5454; font-family: verdana, 
'Lucida Grande', arial, sans-serif; color:#333;}

メインインデックス(index.php)の修正箇所
記事タイトルにスターを付けました。事前にhatena starのプラグインを導入し、はてなIDのkeyをセット、更にタグ設定にh2とentry-titleを指定しておく必要があります。

<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" 
title="Permalink to <?php the_title(); ?>">
<?php the_title(); ?></a>
</h2>

投稿日時、筆者の横に閲覧数、はてブボタン、ブクマ数を付けました。the_view()を記載されてるタグが閲覧数になります。事前にWP-PostViewsのプラグインを導入しておく必要があります。はてブボタンは、画像(append.gif)を自分のところに落としておいて指定します。ブクマ数は、まんまコピーでいけます。

<?php edit_post_link('Edit', '[', ']'); ?>
<?php if(function_exists('the_views')) 
{ the_views(); } ?> 
<a href="http://b.hatena.ne.jp/append?
<?php the_permalink(); ?>"><img width="16" height="12" 
title="このエントリーをはてなブックマークに追加" 
alt="このエントリーをはてなブックマークに追加" 
src="http://iphone-diary.com/wp-content/uploads/
2009/11/append.gif"/></a> 
<a href="http://b.hatena.ne.jp/entry/
<?php the_permalink(); ?>"><img 
src="http://b.hatena.ne.jp/entry/image/
<?php the_permalink(); ?>" alt="" /></a>
</div>

投稿日時の書式を変えました。

<span class="entry-date"><abbr class="updated" 
title="<?php the_time('Y-m-d\TH:i:sO'); ?>">
<?php the_time('Y年m月d日 H時i分'); ?></abbr></span>

記事の後ろに関連投稿を付けました。事前にSimilar Postsのプラグインを導入し、関連記事を探す比率等を設定しておく必要があります。

<?php wp_link_pages('before=<p><strong>
' . __('Pages:') . '</strong>&after=</p>'); ?>
<h3>Similar Posts:</h3>
<?php similar_posts(); ?>
</div>

単一記事投稿(single.php)の修正箇所
メインインデックス(index.php)との違いは、記事タイトルをリンクにするか否かくらいです。後は全く一緒にしておいてindex.phpを修正したら、同時にsingle.phpも修正するように運用してます。

記事タイトルにスターを付けました。事前にhatena starのプラグインを導入し、はてなIDのkeyをセット、更にタグ設定にh2とentry-titleを指定しておく必要があります。

<h2 class="entry-title">
<?php the_title(); ?>
<a href="<?php the_permalink(); ?>" rel="bookmark" 
title="Permalink to <?php the_title(); ?>"></a>
</h2>

投稿日時、筆者の横に閲覧数、はてブボタン、ブクマ数を付けました。the_view()を記載されてるタグが閲覧数になります。事前にWP-PostViewsのプラグインを導入しておく必要があります。はてブボタンは、画像(append.gif)を自分のところに落としておいて指定します。ブクマ数は、まんまコピーでいけます。

  • 場所はindex.phpと一緒です。

投稿日時の書式を変えました。

  • 場所はindex.phpと一緒です。

記事の後ろに関連投稿を付けました。事前にSimilar Postsのプラグインを導入し、関連記事を探す比率等を設定しておく必要があります。

  • 場所はindex.phpと一緒です。

コメント欄の修正箇所
メールアドレスが必須なのを外していますが、もしかしたらスパム関係で害が出るとも限らないので、暫く様子見してます。外し方は、MySQLのwp-optionsののrequire_name_emailのフラグを0にすればOKです。

WPtouch(iPhoneテーマ)の修正箇所
WPtouchで使ってるcssやphpは、管理画面では触れないのでFTPでファイルを探して修正する必要があります。「/plugins/wptouch/themes/default」この場所にcssやphpが固まってるので好みにメンテします。

iPhoneでスクリーンショットを2枚並べて表示させるようにしています。WPtouchは頻繁にアップデートされるんですが、style.cssを修正すれば大丈夫な時もあれば、style-compressed.cssを修正しないと駄目な時もあり、良く分からんので、ふたつとも修正することにしました。style-compressed.cssは、style.cssの改行とか空白とかを除いたファイルなんですが、同じ内容のファイルなんで下記と同じように修正すればOKっす。

以下、AppBankさんのWPtouch記事を参考にしています。

.mainentry img, .pageentry img, ol.commentlist li img {
max-width: 100%; height: auto; }
#singlentry img {
width: auto;
max-width: 100% !important;
max-height: 194px !important;
margin-right:10px;
margin-bottom:6px; }

index.phpやsingle.phpもいじってます。タイトル横に閲覧数、はてブボタン、ブクマ数、関連投稿を表示させるようにしました。タグ自体は、先に説明したPrimePressのindex.php等と一緒です。ここまでくれば慣れでいます。

  • タグはPrimePressのタグと一緒。タイトル横に設定してます。

最後、修正したファイルをまとめて列挙しておきます。

  • /themes/primepress/style.css
  • /themes/primepress/index.php
  • /themes/primepress/single.php
  • /plugins/wptouch/themes/default/style.css
  • /plugins/wptouch/themes/default/style-compressed.css
  • /plugins/wptouch/themes/default/index.php
  • /plugins/wptouch/themes/default/single.php

上記は今後も変わるかも知れませんので最新版をサイトページに保持しておくことにしました。css & phpタブになります。

-

タグ: css, php, WordPress

Similar Posts:

9 Comments

  1. [...] 今までどうしても出来なかったiPhone最適化をしてみたくてTwitterで助けてもらいながらWordPressの設定をいじってみました。 参考にさせていただいたのは、普通のサラリーマンのiPhone日記というブログを書いているhiro45jpさんです。 今回は、この投稿を教えてもらいました。 WordPressで触ったcss & php等(11/15現在) [...]

  2. ぐれぞう より:

    hiro45jpさん、こんにちは。
    wordpressの設定、大変参考になります!

    ちなみに文中のリンクの後ろに「はてなブックマーク数」を表示するのは、どういった設定をしているんですか?

    既出だったら、申し訳ございません。

  3. hiro45jp より:

    ぐれぞうさん、こんばんは!
    コメントありがとうございます。

    文中のリンクは、FirefoxのAdd-onで「Makelink」ってのを使って
    決まった書式にしてリンクを貼っています。

    <a href="http://b.hatena.ne.jp/entry/%url%" target="_blank" 
    rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/%url%" 
    alt="" /></a>
    

    書式でいうと%url%がサイトのURL。
    上記でブクマ数が表示されます。お試しあれー。

  4. ぐれぞう より:

    hiroさん、回答ありがとです!
    なるほどMakelink使うんですね。ちょうどインストールしています。
    やってみますねー。

    ラクしたかったので、自動的にブックマーク数が付く方法をググってみたんですが、見つかりませんでした。ないんでしょうかね〜

  5. hiro45jp より:

    ぐれぞうさん、コメントありがとうございます。

    前は、はてなブックマークでしたが、はてな記法というのを使うと
    bookmarkと入れるだけで、ブクマ数がついたんですよねー。
    WPで、はてな記法を使うプラグインがあったようですが、
    私の場合は、導入してませんです。

  6. 浮嶌 より:

    はじめまして!!

    ワードプレス初心者のうきしまです。

    index.php とsingle.php 違いに少し言及されていますが
    違いがよくわかりません。

    よかったら詳しく教えていただけませんか??

    single.php は必要なんんでしょうか??

  7. hiro45jp より:

    うきしまさん、コメントありがとうございます。

    index.phpはTopページ「http://iphone-diary.com/」とかで
    使われるphpでして、私のサイトの場合は5記事フルで表示させてます。
    single.phpは個別ページ「http://iphone-diary.com/?p=3895」とかで
    使われるphpです。私のサイトの場合はわざと違いが無いようにしてますが、
    index.phpでは「続きを読む」みたいにしておいて中身はsingle.phpで
    見せるなんてサイトも多いようです。

    なのでどっちのphpも両方とも必要ですー。

  8. 浮嶌 より:

    なるほど。ありがとうございます。

    自分は今美容室のサイトをWP使って作ろうとしているんですが
    TOPページと下層のページは少しデザインがちがいます。
    TOPはサイドバーがなく下層はすべてサイドバーがあります。
    そういった場合TOPページをindex.phpにしたほうがよいのでしょうか??
    それとも下層のページの基本的なものをindex.phpにしてTOPは
    独立ページといったほうがやりやすいのでしょうか??

  9. hiro45jp より:

    浮嶌さん

    コメントありがとうございます。
    実は私もあまりWPは詳しく無いのですが、参考となるような
    WPのサイトがあれば、そのテンプレートを使ってみるというのも
    良いかもしれません。確かにおっしゃるようなサイトを見た
    こともあるのですが、方法は分からないです…。
    お役に立てず、すみません。

コメントをどうぞ

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>