新宿キャットウォーク（新宿猫歩） » Wordpress

WordPress Front-end-Editor導入　便利になった。

shinjuku-wombat — Sun, 15 Aug 2010 00:24:44 +0000

WordPressであったらいいなぁと思っていた、見ている画面での編集を実現するプラグインをいれてみました。
このPluginは、Front-end-Editorというプラグインです。

実際にスクリーンショットのように、訪問者が見ている画面で直接編集する事ができるのです。編集画面に入って、どこだっけなーという時間が無くなるのと、わざわざ　編集画面に行って編集しなくてよいので編集時間の短縮にもなります。そして、編集の間違いがなくなり非常に便利です！

インストールは、通常のPluginのインストールと一緒です。
1)解凍したフォルダを、/wp-contents/plugins/　にコピーします。

2)その後、Pluginを有効にする。

3)設定としては、設定ー＞Front-end-Editorの欄で「WYSIWIGエディタを有効にする」を選択する。

これで終了です。

ファイルは、以下のWordPressのディレクトリにあります。
WordPress › Front-end Editor « WordPress Plugins

WordPressのバージョンが、2.8は、1.8　を使いましょう。
ディレクトリの画面で、OtherVersionを選択すると過去のバージョンが選択できます。
Front-end-Editorの1.9を入れたときにはWordpress2.8では動きませんでした・・・

equilibrium でのPaging (WP-pagenavi)を使えるようにしました。

shinjuku-wombat — Sun, 18 Jul 2010 02:00:29 +0000

いくつか問い合わせを受けていた、equilibrium でWP-pagenavi を使ったページングを変更しました。
とか言っても、そんなかっこいい物ではなくて強引に押し込んでおります。
やりかたは、equilibriumのテーマの編集でindex.phpを編集します。

まず、
　の下に、以下の文書を追加
利用したいところの直前に記入しても、ページ数を取得してません。
何度やっても、１になるので何でかと３０分は考えちゃいました。

そして、沢山表示するあたりを変更です。通常以下のように記入されているので、

これを、以下のように書き換えることで、WP-pagenaviを使えるようにします。

素直に、posts_per_pageだけで終わってくれれば良いのですが、query_postsを３回も使っておりますから素直に行かないので、強引にoffsetをページ数分だけ行うというシンプルじゃないやりかたで実現です。

最近はブロードバンドも進んでいるので１ページあたり、５０の記事を表示するように変更しました。

WordPress少し変更

shinjuku-wombat — Mon, 12 Jul 2010 22:30:12 +0000

WordPressバージョン3.0を導入しようか悩んだものの移行が手間だと嫌だなぁと思いやめてBLOGの使い勝手を向上させる事にしました。

そこで本日は、いままで使っていた日本語の形態素解析を使ったおすすめ記事表示の機能をやめて、Simple Tagというpluginを使って関連記事を表示する機能を入れました。

記事の下にでてくる関連する投稿を意味のあるものにしました。
（いままでは、あまり関連しない物が表示されておりました。すいません・・・）

設定は、至って簡単でページで使用中のタグにチェックをいれたのと、
関連投稿で　投稿内に関連投稿を自動的に表示を Blogonlyにしたぐらいです。

iG:Syntax Hiliterを追加しました。

shinjuku-wombat — Sun, 01 Feb 2009 23:00:07 +0000

iG:Syntax Hiliter というプラグインをいれたのですが、Equilibrium WordPress Themeと一緒にiG:Syntax Hiliterを利用すると上手く表示されなかったので、CSSを少し変更したら上手く表示されました。
何が悪いのわからなかったので、どんな動きをしているのかソースコードとか見てたのですが、単にCSSの問題でした。
どこを修正したのか掲載しておきます。

CSSを変更する前では、こんな表示。

以下のCSSに追加します。
plugins/ig_syntax_hilite/css/syntax_hilite_css.css

追加する内容は、２７行目からの設定です。

PLAIN TEXT

PHP:

.syntax_hilite .langName { color:#000000; font-weight:bold; }
.syntax_hilite textarea { margin:0px -5px -2px 0px; border:none; }
/*
-----------------------------------------
EXTENSION
-----------------------------------------
*/
.syntax_hilite ol {Padding-left:50px}
.syntax_hilite li,al {list-style-type: decimal!important;}

書き換えに成功すると、以下のように表示されます。
どんなふうにして行数の表示をしているのか見ていたのですが、

で成立しておりました。
（そんなのもわからないで情けない・・・）

この問題は、Equilibrium WordPress Themeで、ol,liの定義で、list-style-type を■って設定しているからですね。

サイトのカテゴリ表示を格好よく！

shinjuku-wombat — Sat, 31 Jan 2009 23:00:44 +0000

Equilibrium WordPress Themeでは、トップページはかっこ良くても、カテゴリ等を押したときにイマイチなので、少し修正しました。
この修正により、カテゴリ選択時でも、トップページのサムネイルのように格好よく表示されるようになります。

かなりソースコードが汚いので恥ずかしいのですが、こんな感じです。

どんな部分を変更したかといいますと、
テーマの中にある、archive.php ファイルです。

PLAIN TEXT

PHP:

get_header(); ?>
class="content">
if (have_posts()) : ?>
$post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
/* If this is a category archive */ if (is_category()) { ?>
‘’ カテゴリ
/* If this is a tag archive */ } elseif( is_tag() ) { ?>
Posts Tagged ‘’
/* If this is a daily archive */ } elseif (is_day()) { ?>
Archive for the_time('Y.m.d'); ?>
/* If this is a monthly archive */ } elseif (is_month()) { ?>
Archive for the_time('Y.m'); ?>
/* If this is a yearly archive */ } elseif (is_year()) { ?>
Archive for the_time('Y'); ?>
/* If this is an author archive */ } elseif (is_author()) { ?>
Author Archive
/* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
Blog Archives
} ?>
foreach((get_the_category()) as $c_v) {
$c_v ->cat_ID ;
}
$cat_id_v = $c_v->cat_ID;
query_posts($query_string."&cat=${cat_id_v}&showposts=12"); ?>
while (have_posts()) : the_post(); ?>
class="latest-post-wrap">
class="latest-post">
class="latest-title">
"" rel="bookmark" title="Permanent Link to ">(); ?>

class="latest-image">

             image_attachment('image', 162, 118, apply_filters('the_permalink', get_permalink())); ?>

class="latest-content">

class="postMeta-front">class="date">('Y.m.d A h:i') ?>class="comments">('0', '1', '%'); ?>
class="clear">

  $excerpt = get_the_excerpt();

  echo string_limit_words($excerpt,30);

?>

class="moretext">"">続きを読む...

                 endwhile; ?> 

 endif; ?>

 get_sidebar(); ?>

class="clear">

 get_footer(); ?> 

CSS1:WordPressのテーマを変更するためのCSSの理解

shinjuku-wombat — Wed, 28 Jan 2009 02:00:53 +0000

いままで、多少のHTMLしか理解のできない私が、キャットウォークが持っていたCSS関連の書籍から吸い上げた知識をここにUPしていきます。

なんでまたCSS？と、思われるのですがWordPressのテーマをエディットするために必要だったためです。なんか、いままでのテーマにない、カッコいいやつを作りたいとおもったのです。WordPressのテーマを変更するにあたっては以下の事をやる必要があります。
１）PHPの理解
２）WordPressのタグの理解
３）CSSの理解
４）XHTMLの理解
をする必要が有りそうです。

２）は、以下の投稿にあるヘルプをよめばある程度のタグがわかります。
http://shinjuku-catwalk.com/wordpress/2009/01/wordpress-help-sheet/

３）私の頭のなかでは、時代はHTMLで止まっていたので、CSSがわかりませんでした。
要約すると、HTMLとXHTMLは別物です。
XHTML+CSSですべてを表現しております。
CSSは、フォント、カラー、サイズなどに関する情報すべてが含まれております。
私のページで、XHTMLだけになった場合には

以下のようなページになります。

ここにCSSでデザインを追加することにより、以下のページのように表示されます。

どんな要素があるのかは、FirefoxのプラグインのFirebugを利用するとわかります。
しかも、Firebugの凄いところは、表示してるページのCSSを変更して即座に変更した様子が分かるのです。（すばらしい！これがあれば、私の理解はもっと早かったのに～と思ってます）

まずは、Firefoxの「ツール」→「Firebug」→「Firebugを開く」で開きます。
Firefoxの下のほうにFirebugの画面がでてきます。

この画面で、「調査」というボタンを選びます。
ボタンを押すとブラウザの画面の中で、枠がでてきます。この枠を、自分が知りたいところの持っていくとどのようなCSSが適用されているかわかります。
例えば・・・新宿キャットウォークというタイトルを選ぶと以下のようなCSSが適用されているのがわかります。

ここで、フォントの種類を変更したいときにはどこを変更すれば適用されるかは、打ち消し線が入っていない、style.css のh1 a { font-family: }が適用されていることがわかります。ここのフォントを変更する事によってタイトルのフォント変更ができます。
font-size: 2em; となっているところを、直接変更が可能なので変更してみましょう！
4emに変更するとその場で変更されたフォントサイズがブラウザ上に表示されます。
おーーーーかなり便利！
これを利用して、必要な内容を変更していきます。
カラーも変更できるので、画面上でどのようなカラーリングが優れているのかを考えながらCSSを変更できます。

さて、どこを変更するとテーマのCSSが変更できるのか？
FTPでWordPressのテーマの中をチェックしてみます。
WordPress2.7の場合について話をします。
wordpress/wp-content/themes/自分が選択してるテーマ
の中に、style.css （先ほどのFirebugでのCSS）をチェックします。

Firebugが指摘した、８６行目を見ると先ほどと同じ内容があります。
ここを書き換えることによって、フォントサイズなどの変更ができます。
※書き換えるときには、事前にバックアップなどを取っておきましょう。
（PHPは、テキストファイルとして簡単にバックアップできるので、フォルダごとバックアップしておきましょう）

第１回目は以上です。

CSSやXHTMLを理解する上で役立った書籍
3週間でマスターWebデザインの教室―未経験でもWebデザイナーになれる本
村谷圭一

正直デザインに関しては良いとは言えないのですが、コーディングに関してはなるほど！と思われるものがあります。素の文書から、XHTMLとCSSをコーディングしていく状況をみせてくれるので、XHTMLとCSSを理解するのに便利な書籍です。

Smart Youtube

shinjuku-wombat — Thu, 22 Jan 2009 01:00:02 +0000

今日は、WordPressのプラグイン Smart Youtubeの紹介です。

このプラグインは、Youtubeの映像を簡単に取り込む事ができます。
通常、Youtubeの映像を掲載しようとすると、オブジェクトをHTMLのコードで張込む必要が有ります。

少なくとも以下の手順が必要です。

Youtubeの画面を開いてエンベディッドボタンを押す。
色を選択、サイズを選択する。
その後、URLをコピー（記憶させる）

記憶させたURLを貼付ける。（以下はWordPressの画面）

こんな手間を一瞬で解決するプラグインがあります。
Smart Youtubeというプラグインを導入することによって、
貼付けたいYoutubeの映像のURLがわかれば、それを貼付けて完了です。

ブラウザのURLが以下のものだとすると、

http://www.youtube.com/v/QcGMHjb1W5k&hl

以下のように、http→httpv に変更するだけでOK
httpv://www.youtube.com/v/QcGMHjb1W5k&hl

簡単に使えちゃうんです。
このプラグインのメリットは、それだけではなくて
httpvh:// とすると、ハイクオリティモードでの再生ができて、
httpvhd:// とすると、HDモードでの再生ができることです。

ビデオで撮影してきては、Youtubeにあげている私にとっては非常に便利なツールです。
枠の色などは、SmartYoubueの設定画面で設定できます。

新しいテーマ(Equilibrium)に変更しました。

shinjuku-wombat — Thu, 15 Jan 2009 14:35:43 +0000

昨日より、新宿キャットウォークのテーマを新しく変更致しました。

写真＋記事でわかりやすく！を目指していたので、リニューアルを想定していた形と近かったので、暫定ではありますがテーマを適用してみました。
Equilibriumは、釣り合い・平衡、つり合い、平静なんて意味があるようです。
注意点としては、入力するときに拡張タグ「image」に対して画像ファイルを指定しなくてはならないのですが、どこかのタイミングで投稿したJPEGから自動的に取得するように変更したいものです。
適用したテーマは、これです。

Equilibrium 1.4 : Tudinh Duong 作
Magazine style WordPress theme. Visit http://equilibrium.madebyon.com for more infomation.

結構素敵なテーマです。マガジンスタイルと書いてありますが、このようなスタイルを望んでおりました。
独自タグの利用方法など学ばせてもらっております（なるほどなるほど・・・と）
Equilibriumテーマを適用してから行ったカスタマイズは、以下の内容です。
index.php
日付のカスタマイズ（YYYY.MM.DD HH:MM)に変更
表示の変更（少し）

今後変更をしたいところ。

日付関連をすべてのページで修正したいです。
写真をクリックしても、記事に行かない（変更予定）
修正（２００９年１月１７日）
タグの表示が好きじゃない
カテゴリの件数表示方法が好きじゃない。カテゴリと件数が同じ行にない。
バナー部分のページ文字表示がかっこよくない（変更予定）
真っ白すぎるので、素っ気ない（デザイン予定）

いままでのサイトはこんな感じでした。

WordPress-help-sheetが便利

shinjuku-wombat — Wed, 07 Jan 2009 00:00:56 +0000

WordPressのテンプレートを編集するようになって知ったのですが、便利なヘルプシートがありました。
Wordpress使いの人には当たり前なのかな？

WordPressで苦労した事　立ち上げについて

shinjuku-wombat — Mon, 05 Jan 2009 12:36:21 +0000

正直、今でも苦労しているのですがIEでうまく表示してくれないのが苦労しているところです。

構想から立ち上げまで、約２ヶ月ぐらいです。
サイトの設定は、２日ぐらいですんでおります。

安価にWordpressを利用する事ができるサイトを探したところ、ロリポップが安価に、簡単に利用できそうなので選択しました。この他にもあるかとは思いますが、ドメインの料金と合わせて安価なところが良かったので、ロリポップを選びました。

費用も非常に安価です。ドメインの利用料は、毎年９５０円です。（.com の場合）
サイトも200MBまでであれば、４７２５円（年間）で利用ができます。

オリジナルドメインの取得＋サイト立ち上げの費用をあせても、６０００円足らずの費用でこのサイトを立ち上げしております。

wordpressは、ブログは記入した事があるが立ち上げたことは有りませんでした。
あまり難しい設定を行わなくても利用できます。（MySQLの設定も簡単なWEB GUIで作れば完成です）３０分もあれば、設定完了です。

時間がかかるのが、WordPressのテーマの設定や、テーマが英語対応なので、日本語化するところなどに時間を費やしました。

MovableType とWordpressで悩んだのですが、情報のオープン具合と、ソフトウェアの進化の具合、携帯対応の状況を鑑みてWordPressを選択する事にしました。MTの良さというのは正直わかっておりません。最近MTからWordPressに移行するという人が多くなっているのは気になっておりました。

WordPressはマイナーバージョンでも異なるとGUIが異なっている事に少しカルチャーショックを受けました。使いやすくなってるんですね。プラグインは自動インストールってのは驚きました。