Posts tagged URL

sidebar.php の ulタグの直後に以下の行を追加
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
また sidebar.php の最後の ul タグの前に以下の行を追加
<?php endif; ?>
つまり ul タグの中を上記の if 文ではさむ感じです。

<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
// ここにデフォルトのサイドバーの内容を書く
<?php endif; ?>
</ul>
</div>

functions.php の作成

作成しているテーマディレクトリに functions.php を作成して下記のコードを追加する。

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

これで管理画面で表示＞ウィジットでアクセスすると下記のような画面になり動的にサイドバーを変更することができます。

少しの手間で使い勝手が便利になるので、テーマを作成するときにはウィジットに対応させておいた方がいいでしょう。

参考URL:Widgetizing Themes ? Automattic

class function function.php http log PHP png sidebar theme upload URL Word WordPress

WordPress テーマを作成する（３）　トップページの投稿一覧を作る

6120日

by matsuura in WordPress

index.php に投稿一覧を作成する

投稿内容の一覧を表示するには下記のコードのパターンを使用します。

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
/* ここに投稿内容を表示するコードを書く */
<?php endwhile; ?>
/* 1件も投稿がなかった場合 */
<?php endif; ?>

最初の if (have_posts()) で投稿があるかチェックしてあれば、次の while 文で投稿の数だけループして、投稿がなければ endwhile に分岐します。

WordPress のタグを使用して投稿内容を表示する

上記のループ内で使用する個別の投稿を表示するタグの一部を書いておきます。
投稿の個別URLを表示<?php the_permalink() ?>
タイトルを表示<?php the_title(); ?>
投稿日時を表示<?php the_time('Y/m/d') ?>
カテゴリを表示<?php the_category(', ') ?>
コメント・トラックバックを表示<?php comments_popup_link('0ä?¶', '1ä?¶', '%ä?¶'); ?>
投稿の編集リンクを表示（ログインしていないと非表示になる）<?php edit_post_link('ç?¨é??', '', ' | '); ?>

最終的なコード

<?php get_header(); ?>

<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('Y/m/d') ?></small>
<div class="entry">
<?php the_content('続きを読む ?'); ?>
</div>
<p class="postmetadata">カテゴリ：?<?php the_category(', ') ?> | <?php edit_post_link('編集', '', ' | '); ?> コメント・トラックバック：<?php comments_popup_link('0件', '1件', '%件'); ?></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('? 前のページへ') ?></div>
<div class="alignright"><?php previous_posts_link('次のページへ ?') ?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
</div>

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

最終的にこうなりました。（クリックで拡大表示されます）

まだ CSS をまったく書いていないので縦にのっぺりとしていますが、だいぶブログらしくなってきました。

book bookmark class css http link log PHP png sidebar theme upload URL Word WordPress

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

6121日

by matsuura 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>

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

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

age app class css ec feed file generator HTML http IE LAN link log option page PHP png RSS theme upload URL Word WordPress XML

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

6121日

by matsuura 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(); ?>

テーマを見てみる

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

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

class css http log PHP png sidebar template test theme upload URL utf-8 Word WordPress

CakePHP1.2 バリデーションのルール

6130日

by matsuura in CakePHP

CakePHP1.2 のバリデーションのメモです。
詳しくは cake/libs/validation.php を見ると分かりやすいです。

半角英数字のみ

alphaNumeric

var $validate = array('field' => array('rule' => array('alphaNumeric')));

文字列の長さ

between

var $validate = array('field' => array('rule' => array('between', 6, 8)));
半角で6文字以上8文字以内

文字列が空

blank

var $validate = array('field' => array('rule' => array('blank')));

クレジットカード番号

cc

var $validate = array('field' => array('rule' => array('cc')));

比較

comparison

var $validate = array('field' => array('rule' => array('comparison', '>', 10)));
‘==’, ‘!=’, ‘< =’, など使用できる

正規表現

custom

var $validate = array('field' => array('rule' => array('custom', '/^[0-9]{3}\-[0-9]{4}$/')));
例として NNN-NNNN 形式の郵便番号のバリデーション

日付

date

var $validate = array('field' => array('rule' => array('date', 'ymd')));
‘dmy’, ‘mdy’, ‘ymd’, ‘dMy’, ‘Mdy’, ‘My’, ‘my’ が使用可

小数点の桁数チェック

decimal

var $validate = array('field' => array('rule' => array('decimal', 2)));

var $validate = array('field' => array('rule' => array('decimal', null, '/^[0-9]{2}\.[0-9]{2}$/')));
正規表現を指定してチェックすることも可。

メールアドレス

email

var $validate = array('field' => array('rule' => array('email')));

=== での比較

equalTo

var $validate = array('field' => array('rule' => array('equalTo', 'hoge')));
型も含めて等しいかチェック

拡張子

extension

var $validate = array('field' => array('rule' => array('extension', array('gif', 'jpg')));
ファイルの拡張子をチェック。許可したい拡張子を配列で指定。デフォルトは array(‘gif’, ‘jpeg’, ‘png’, ‘jpg’)

IPアドレス

ip

var $validate = array('field' => array('rule' => array('ip')));

最小文字数

minLength

var $validate = array('field' => array('rule' => array('minLength', 6)));

最大文字数

maxLength

var $validate = array('field' => array('rule' => array('maxLength', 12)));

数字

numeric

var $validate = array('field' => array('rule' => array('numeric')));

数字の範囲チェック

range

var $validate = array('field' => array('rule' => array('range', 0, 100)));
注意点は指定した数字は含まれない
上の例では 1?99 までが true

var $validate = array('field' => array('rule' => array('range')));
とすると有限数かどうかのチェック

URL

url

var $validate = array('field' => array('rule' => array('url')));

CakePHP cakephp1.2 date ec email IE jpeg LAN mail null PHP png URL validate validation

QRコード生成ツールを作りました

6143日

by matsuura in 作成サイト

ちょっと仕事で QR コードをいじる機会があったのでせっかくなので QR コードを生成するツールを作ってみました。

QRコード無料作成ツール – QRcodeMaker

3通りの方法で QR コードを生成できます。

URLを入力して HTMLタグを生成する
img タグに引数を与えて生成する
JavaScript をページに設置して生成する

最初の2つはよくあるけど、最後のJavaScript を貼り付けてそのページの URL の QR コードを生成するのは見たことがないのでよいかと。
共通のテンプレートを使用していてページ毎にそれぞれの URL の QR コードを表示したい場合などに便利かと思います。（需要があるか分かりませんが。。。）

実際にこのエントリに JavaScript を貼り付けてみました。下の QR コードがそれです。

よろしければ使ってみてください。

generator HTML http JavaScript QR tool URL

CakePHP jQuery を使用した Ajax ファイルアップロード

6165日

by matsuura in Ajax, CakePHP, JavaScript

下記ページを参考にさせていただきました。
“jQueryを使ったAjaxファイルアップロード” フォーラム – CakePHP Users in Japan
David Golding Design Blog -

上記ページでは jQuery を使用してテキストファイルをアップロードしてテキストの内容を表示するというものですが、画像をアップロードしてアップロードした画像をフォームの下に Ajax を利用して表示するというのをやってみました。

jQuery 使用準備

jquery.js と jquery.form.js を app/webroot/js/ 以下に配置します。
アップロードするビューで上記 JavaScript ファイルを読み込むため下記コードをビューに追加します。
<?php echo $javascript->link(array('jquery.js','jquery.form.js')); ?>

ビューにアップロードするフォームを作成する

今回は users コントローラの form アクションでフォームを表示します。Ajax の処理を行うのは users コントローラの upload アクションです。
views/users/form.ctp

<h1>upload test</h1>
<?php echo $form->create('User',array('name'=>'uploadForm','id'=>'uploadForm','type'=>'file'));?>
<?php echo $form->input('upload_file',array('label'=>'Upload Text File ','type'=>'file'));?>
<?php echo $form->button('アップロード',array('onClick'=>'$('#uploadForm').ajaxSubmit({target: '#uploadFile',url: '/users/upload'}); return false;'));?>
</form>
<div id="uploadFile"></div>

コントローラの処理

views/users/form.ctp から「アップロード」ボタンを押すと users/upload アクションの $this->data にアップロードファイルの情報が入ってきます。ここでは mime タイプによって JPEG ファイルのみをアップロードできるようにしています。アップロード後に views/users/upload.ctp を出力します。

function upload() {
    if (!$this->data['User']['upload_file']) {
        $this->set('error','アップロードするファイルを選択してください');
	$this->render('upload','ajax');
    } else {
	if ($this->data['User']['upload_file']['type'] != 'image/jpeg') {
	    $this->set('error','アップロードできる画像は JPEG のみです');
	    $this->render('upload','ajax');
	} else {
	    $filename = '/files/'.intval(rand()).'.jpg';
	    rename($this->data['User']['upload_file']['tmp_name'], WWW_ROOT.$filename);
	    $this->set('filename', $filename);
	    $this->render('upload','ajax');
	}
    }
}

Ajax が返すビューを作成する

/users/upload で処理した結果を返すビューを作成します。今回は veiws/users/upload.ctp として作成しました。ここで img タグによりアップロードしたファイルを表示しています。

<?php if (!empty($error)): ?>
<p><?php echo $error;?></p>
<?php else: ?>
<p>Upload successful</p>
<?php echo $html->image($filename); ?>
<?php endif; ?>

以上で jQuery を使用して Ajax で画像のアップロードができます。

age Ajax app CakePHP class cli click ec error file form function HTML http IE image input JavaScript jpeg jQuery link log mime PHP test upload URL view

Firefox の検索バーの検索エンジンをキーボードで切り替える

6179日

by matsuura in Firefox

参考URL
HackAttack：Firefoxをマウスなしで使い倒す – ITmedia Biz.ID

Firefox で検索バーにカーソルを移動するショートカットは Ctr+K ですが、その検索バーの検索エンジンを切り替えるのもショートカットでできることを知りました。

検索バーにカーソルを移動
Ctrl+K

検索エンジンを切り替え
Ctrl+↓ or Ctrl+↑

ポイントは検索バーにカーソルがないと検索エンジンの切り替えができないということです。先にカーソルを検索バーに移動してから切り替えです。
元記事には書かれていなかったので最初はできずに「？」と思ったもので、念のために書いておきます。

Firefox HTML http shortcut URL

« Previous

Posts tagged URL

API フックとは

アクションとフィルタ

sidebar.php の修正

functions.php の作成

index.php に投稿一覧を作成する

WordPress のタグを使用して投稿内容を表示する

最終的なコード

ヘッダファイル

フッタファイルの作成

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

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

CSS ファイルを作成する

index.php を作成する

テーマを見てみる

半角英数字のみ

alphaNumeric

文字列の長さ

between

文字列が空

blank

クレジットカード番号

cc

比較

comparison

正規表現

custom

日付

date

小数点の桁数チェック

decimal

メールアドレス

email

=== での比較

equalTo

拡張子

extension

IPアドレス

ip

最小文字数

minLength

最大文字数

maxLength

数字

numeric

数字の範囲チェック

range

URL

url

jQuery 使用準備

ビューにアップロードするフォームを作成する

コントローラの処理

Ajax が返すビューを作成する

カテゴリー

アーカイブ

タグ