Posts tagged css

WordPress テーマを作成する（２）

1
6086日
by in WordPress

前回は style.css と index.php だけを作成して最低限のブログを表示させました。なぜこれだけのファイルで表示ができるかというと選択しているテーマに必要なファイルがない場合は wp-content/thmems/default 内のファイルを使用するためです。

今回はヘッダファイルとフッタファイルを作成します。

ヘッダファイル

テーマディレクトリに header.php を作成し下記のような内容にしました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>

ゼロから書くのは大変なので default/header.php をコピーして必要最低限のみ残してみました。

フッタファイルの作成

ヘッダ同様に footer.php ファイルを作成し、下記のようにしました。

<div id="footer">
<?php bloginfo('name'); ?> Powered by <a href="http://wordpress.org/">WordPress</a><br />
<a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
</div>
</div>

<?php wp_footer(); ?>
</body>
</html>

ヘッダとフッタのみのブログができました

（クリックで拡大画像が見れます）
wp2.png

WordPress テーマを作成する（１）

4
6086日
by in WordPress

WordPress用のテーマを作ってみようと思います。始めて作成するのですが、作成過程を投稿していきます。まずは第1回目です。

テーマフォルダを作成する

wp-content/themes/ 以下にテーマ用のディレクトリを作成します。
今回は test というディレクトリを作成しました。

CSS ファイルを作成する

作成したテーマディレクトリに style.css を作成します。
style.css には必要最低限の項目を書いておきます。

/*
Theme Name: Test Template
Theme URI: http://www.syuhari.jp/
Description: テーマ作成テスト用です。<a href='http://www.syuhari.jp/'>リンクも出来ます</a>
Author: Boze
Author URI: http://www.syuhari.jp/blog/
Version: 1.0
*/
Theme Name
テーマの名称。全角可。ここに書いた名称が管理画面のテーマ選択画面に表示される。
Theme URI
テーマのサイトURL。半角のみ
Description
テーマの説明。全角可。a タグでリンクも作成できる。ちなみに script タグなども書けました。タグはノーチェックかも。いいのかな？
Author
作成者名。全角可
Author URI
作成者のURI。半角のみ
Version
バージョン。半角のみ。ここに書いたバージョン番号が管理画面のテーマ選択画面のテーマ名の後に表示される。

全角を入れたときには文字コードを UTF-8 にする必要があります。

index.php を作成する

作成したテーマディレクトリに index.php を作成して、最低限のコードを書く。

< ?php get_header(); ?>
< ?php get_sidebar(); ?>
< ?php get_footer(); ?>

テーマを見てみる

ここまで出来たら最低限のファイルはそろったので管理画面よりテーマを選択して実際にどういう風に見えるか確認してみます。
管理画面の「表示」を選択すると作成したテーマが一覧にあるので、選択します。
下が現在のサイトの様子です。（クリックで大きな画像が見れます。）
wp1.png

まだ、検索用のファイルなどを作成していないので Warning など出てますがシンプルな WordPress のページが表示されています。

scriptaculous.js を使ってマトリックス状に配置した要素を並び替える

1
6169日
by in Ajax, JavaScript

scriptaculous.js を使って並び替えを行う を応用して格子状に並んだ要素を並び替える例です。基本的な部分はリスト形式の並び替えと同じですので省略します。
最初にデモ、その後にコードを紹介します。

デモ


#sortarea { width: 350px; } #sortarea div { float: left; width: 100px; height: 70px; border: 1px solid #000; margin: 5px; text-align: center; padding-top: 30px; cursor: default; }

A1
A2
A3
A4
A5
A6
A7
A8
A9

ソートする要素

前回は li タグで要素を定義しましたが、今回は div タグで定義しました。
CSS で格子状に並ぶようにしています。

<style>
#sortarea {
width: 350px;
}

#sortarea div {
float: left;
width: 100px;
height: 70px;
border: 1px solid #000;
margin: 5px;
text-align: center;
padding-top: 30px;
cursor: default;
}
</style>

<div id="sortarea">
<div id="drag_1">A1</div>
<div id="drag_2">A2</div>
<div id="drag_3">A3</div>
<div id="drag_4">A4</div>
<div id="drag_5">A5</div>
<div id="drag_6">A6</div>
<div id="drag_7">A7</div>
<div id="drag_8">A8</div>
<div id="drag_9">A9</div>
</div>

ソートする JavaScript コード

Sortable.create の option に overlap:’horizontal’ を指定しなくても並び替えはできますが、少しぎこちない感じになりますので、指定しておいたほうがいいでしょう。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    tag:'div',overlap:'horizontal',constraint: false,
});
// ]]>
</script>

Smarty で正規表現を if 文で使用する

2
6170日
by in PHP, Smarty

Smarty には正規表現を使用して文字列を置換する regex_replace があります。
これを上手に使用して if 文で正規表現を用いて条件分岐させます。

if (preg_match('/php/i', 'PHP is the web scripting language of choice.')) {
    echo 'A match was found.';
} else {
    echo 'A match was not found.';
}

PHP で上記のような処理を Smarty で書くと下記のようになります。

{assign var='string' value='PHP is the web scripting language of choice.'}
{if $string|regex_replace:'/.*php.*/i':'php' eq 'php'}
A match was found.
{else}
A match was not found.
{/if}

ポイントは regex_replace を用いて、正規表現のパターンに該当する場合は元の文字列を何かしらの文字列（上の例でいうと’php’）に置換してしまい、それを eq で置換されているか判定するということです。

これを実際に使用したのは OpenPNE のテンプレートです。
OpenPNE を使用していて、特定のカテゴリのときのみ読み込む CSS を変えたいときがありました。
OpnePNE のイベント関連の URL は　http://expamle.com/?m=pc&a=page_c_event_*** という感じになります。
全部で14種類ありますので、これを普通に if 文で書いていると大変なことになりますし、追加などがあったときのことを考えるとよくありません。

そこで Smarty の if 文に正規表現を使用して下記のようにすることにより1つの条件で page_c_event_*** の URL を条件分岐させました。

Smarty テンプレート

{if $smarty.get.a|regex_replace:"/page_c_event.*_/":"event" eq "event"}
{** イベントです**}
{else}
{** イベント以外です **}
{/if}

OpenPNE コンテンツをセンター寄せにする

0
6250日
by in OpenPNE

OpenPNE のデザインは左寄せなのですが、これをセンター寄せに変更したいという要望がありました。
最初は CSS に
.ext_sub_container { width: 720px;margin: 0px auto; }を追加してみたのですが、やはり IE ではうまく表示できません。
そこでテンプレートを見直すと
inc_header.tpl 339行目
<div align="left">というを
<div align="center">に変更したらうまく行きました。

ちなみに OpenPNE テンプレートのカスタマイズ でも書きましたが
/openpne/webapp/modules/pc/templates/inc_header.tpl を
/opnepne/webapp_ext/modules/pc/templates/inc_header.tpl に
コピーしてからカスタマイズすると元のファイルを残したままカスタマイズできるのでお勧めです。
その場合は /openpne/config.php の
define('USE_EXT_DIR', false);を
define('USE_EXT_DIR', true)に変更するのをお忘れなく。

optionタグを選択不可にする disabled 属性を IE6 でも有効にする方法

0
6309日
by in HTML

optionタグを選択不可にする disabled 属性で紹介したように option タグに disabled 属性を指定することにより選択不可にすることができるのですが、IE6 では選択できてしまいます。

JavaScript で解決する方法です。

Select, Option, Disabled And The JavaScript Solution

上記の参考サイトに詳しくやり方が書かれていますので、簡単に手順だけ紹介。

  • 参考サイトの「Implementing」にある download リンクより JavaScript コード(select-option-disabled-emulation.js)をダウンロード
  • select-option-disabled-emulation.js を適当な場所に保存
  • html 内で select-option-disabled-emulation.js を読み込む
  • 選択不可にしたい option タグに disabled 属性を指定する

DHTML で解決する方法です。

これは上記参考サイトの補足で紹介されていたサイトです。
apptaro’s blog: Emulating Disabled Options in IE with DHTML Behaviors

こちらも上記URL に詳しいやり方が書かかれていますので、簡単にご紹介。

  • 参考サイトの中央よりやや下にある Download よりファイル一式をダウンロード
  • 適当な場所に css, htc ファイルを保存
  • html で上記 css を読み込む
  • 選択不可にしたい option タグに disabled 属性を指定する

これで IE6 でも option タグの disabled 属性が使えるようになりました。

WordPress でタグを使えるようにしてみた

2
6336日
by in WordPress

使用したプラグインは Simple Tagging です。

WordPress用、タグ付けプラグイン：Simple Tagging | 創造マラソン
こちらのサイトでかなり詳しく解説されています。

Single.php のエントリー本文の後に
<?php STP_PostTags(); ?>
を入れて、タグを表示させ、さらに
< ?php STP_RelatedPosts(); ?>
でタグにより、関連するエントリーを表示させるようにしました。
また、サイドバーに
< ?php STP_Tagcloud(); ?>
を入れてタグクラウドを表示させました。
ただ、このままではリスト構造で縦に並んでしまうので、

Tag Cloud – Simple Tagging for WordPress – Trac
こちらを参考に下記を追加しました。

style.css

ul#tagcloud { padding:0; margin:0; text-align:center; list-style:none; }
ul#tagcloud li { display:inline; font-size:70%; color:#ccc; background: none; padding: 0;}
ul#tagcloud li a, ul#tagcloud li a:link { text-decoration:none; }
ul#tagcloud li a:hover { text-decoration:underline; }
ul#tagcloud li.t1 a { color:#797979; font-size: 120%; }
ul#tagcloud li.t2 a { color:#6d6d6d; font-size: 160%; }
ul#tagcloud li.t3 a { color:#616161; font-size: 190%; }
ul#tagcloud li.t4 a { color:#555555; font-size: 210%; }
ul#tagcloud li.t5 a { color:#484848; font-size: 230%; }
ul#tagcloud li.t6 a { color:#3c3c3c; font-size: 250%; }
ul#tagcloud li.t7 a { color:#303030; font-size: 270%; }
ul#tagcloud li.t8 a { color:#242424; font-size: 290%; }
ul#tagcloud li.t9 a { color:#181818; font-size: 310%; }
ul#tagcloud li.t10 a { color:#0c0c0c; font-size: 330%; }
« Previous
Go to Top