02-24-10

WordPressテーマ変更の時に忘れそうなことまとめ

WordPressだけに限ったことじゃないんですけどね^-^; テーマをシンプルなものに変更してみました。リニューアルってほどではありませんが、テーマを変えてる途中でいろんなことがおきましたので、メモ代わりにまとめておきます。

1.metaタグを忘れずに

meta name="verify-v1"
meta name="y_key"
meta name="msvalidate.01"

この3つのmetaタグはgoogle、Yahoo、MSの検索エンジンにクロールさせるタグなので忘れずに。WordPressテーマ編集の「ヘッダー (header.php)」ここの項目からコピーしておきましょー。

2.Google Analyticsコード

Google Analyticsに登録した時に、3~4行ほどJavaScriptコードを追加したと思います。いわゆる「トラッキングコード」ってヤツですね。ボクはすっかり忘れてて、一日分の計測ができてませんでした。。。たいしたトラフィックでもないんですけどね笑 WordPressテーマ編集の「フッター (footer.php)」のところにボクは書いてありました。

3.CSSの追加

テーマを変更したらちょっとはCSSを変更すると思います。変更する分とは別に、追加したCSS、ボクの場合はtableタグに関するCSSをコロッと忘れていたので、変更する前のテーマのCSSに、追加した項目があれば忘れずにコピーしておきましょー。

4.JavaScriptの追加

Flashを表示させるためのswfobject.jsをheadタグに入れていたので忘れずに新しいテーマでもつけておく。

5.新しいテーマで外観の編集を更新したときにphpエラーが出る

エラーがなにを言っているのかよくわかりませんでしたが「functions.php」というファイル名が出ていたので開いて中身を見てみました。特に問題なさそうなときのphpエラーでよく解決することは改行を消すことです。今回ボクに起きたエラーのなかで、この「functions.php」の中にある改行をとっぱらったらエラーなく更新することができました。「functions.php」は下記のディレクトリの中にあります。

wp-content/themes/[テーマ名]/functions.php

6.テーマを変更した時にwp-adminが文字化けする

これはもうボク自身が自爆してたんですが、、^-^; レンタルサーバーの「php.ini」をなんでかさわってしまってて、それによってテーマを変更した時に文字化けがおきてしまってました。普通の使い方をしていた場合は特に触る項目ではありませんが、もし、テーマを変更した瞬間に文字化けが起きたら「php.ini」を設定できるところに行って、下記の表を参考に変更してみてください。

設定項目 設定内容
default_charset UTF-8
mbstring.language neutral
mbstring.internal_encoding 未設定
mbstring.encoding_translation off
mbstring.http_input pass
mbstring.http_output pass
magic_quotes_gpc off
session.use_trans_sid 未設定
short_open_tag on
safe_mode off

※ロリポップの場合の設定順番です

10-17-09

WordPressでソースコードに色をつけるプラグインの使い方:SyntaxHighlighter Evolved

ソースコードの種類に応じて、部分的にテキストの色を変えるSyntaxHighlighterというライブラリがありますが、WordPressにはプラグインがあるので簡単に導入する事ができます。
▼WordPress以外でSyntaxHighlighterの使い方
ソースコードに色をつけるSyntaxHighlighterの導入方法

使うまでの手順

1.プラグイン新規追加で「SyntaxHighlighter Evolved」をインストール。
2.インストール後「使用する」を押してとりあえず完了。
3.ソースコードに対して、[html]ソースコード[/html]とマークアップ。
※[ ]←これは半角で
4.プレビューしてみてください。できましたか?
※この段階で表示できてなかったら、WordPressの外観からheader.phpに<?php wp_header(); ?>と、footer.phpに<?php wp_footer(); ?>が入っているか確認してみてください。もし、入ってなければ、<?php wp_header(); ?>は</head>の直前、<?php wp_footer(); ?>は</html>の直前に記入してください。

通常のSyntaxHighlighterはpreタグに対してnameとidをつけましたが、WordPressのSyntaxHighlighter Evolvedは[ ]←この括弧に種類を書いてパラメータを書いていきます。

通常表示

[html]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
ほげほげ
</body>

開始する行数の指定

[html firstline=”10″]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

自動でリンク設定されるURLテキストの解除

[html autolinks=”false”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

右上に出るツールバーの解除

[html toolbar=”false”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行数を非表示にする

[html gutter=”false”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

シンプル設定

[html light=”true”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

折り畳んで表示

[html collapse=”true”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行を強調させる。カンマで複数設定可能

[html highlight=”4,6,8″]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

ルーラを表示させる

[html ruler=”true”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

Tabの横幅の大きさをかえる

[html tabsize=”10″]

<html>
<head>
	<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
	<title>test</title>
</head>
<body>
	<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行数なくしてシンプルに、自動でつくリンクを解除

[html autolinks=”false” light=”true” highlight=”4,6,8″]

<html>
<head>
	<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
	<title>test</title>
</head>
<body>
	<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

Action Scriptも設定できるかな。

[as3]

mc.onRelease = function(){
	this.gotoAndPlay(10);
}

ActionScriptのバージョンは関係なさそうですね。

package{
	public class test{
			public function test(){
				trace(&quot;test&quot;);
			}
		}
	}
}

各言語の brush と対応JavaScript(SyntaxHighlighter ver.2.0.320)

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

09-23-09

WordPressでやっておくべき事まとめ

SEO関連

・パーマリンク設定
URL自体にタイトルと同じテキストのURLを設定する方法です。amazonの商品ページのURLと同じ方法です。
ダッシュボード⇒左メニューの「設定」⇒パーマリンク設定、を開いて、

/articles/%category%/%postname%.html

「articles」のところは何でもいいです。ボクは「articles」=「記事」ということにしました。この方法が良いのかどうかは定かではありませんが、わりと良い。という周りの意見を兼ねて採用しました。
※2009.10.19追記
どうやら、URLの最後に「.html」があると、googleにインデックスされないくさいことが判明。サイト ステータス ウィザードに「.html」付きでやってみたところうまくいきませんでした。。

/articles/%category%/%postname%/

「.html」を外してしばらく様子を見ます。

そして、もろもろブログランキングサイトを登録。
人気ブログランキング
http://blog.with2.net/
FC2ブログランキング
http://blogranking.fc2.com/
にほんブログ村
http://www.blogmura.com/
たくさん登録するの大変ですね^ー^;とりあえずこんなところで。

ウェブマスター関連

Google Webmaster Central
http://www.google.co.jp/webmasters/
Yahoo検索 サイトエクスプローラー
http://siteexplorer.search.yahoo.co.jp/
Bing Webmaster Center(旧:MSN)
http://www.bing.com/webmaster
※サイトマップは下記のプラグイン、「XML-sitemap」でXMLのURLを生成して登録してください。

アクセス解析

Google Analytics
http://www.google.com/analytics/
トラックワード
http://my.trackword.net/
トラックワードは「楽ワード」という楽天アフィリエイトIDを利用してマッチング広告も提供しています。

プラグイン

All in One SEO Pack(オール・イン・ワンSEOパック)
記事ごとにmetaタグを変更してくれたり、WordPressでのSEO対策定番プラグインです。
All in One SEO Packの日本語版はこちら
XML-sitemap
サイトマップ登録用にXMLを生成するプラグインです。
WPtouch
WordPressのページをiPhoneのSafariで最適化して閲覧できるようにするプラグインです。
WPtouchの詳しい使い方はこちら
Smart Update Pinger(日本語版)
ブログが更新されたときに、「更新したよ」とお知らせをする機能Ping。どうも記事を編集して更新するたびにPingが送信されるみたいで、あまりにも多くのPingを送信するとスパムになるみたいなので、このプラグインで編集の更新ではPing送信が行われなくなります。下記に設定しているPing送信先のURL一覧を記載します。


http://ping.bloggers.jp/rpc/

http://www.blogpeople.net/ping/

http://www.blogpeople.net/servlet/weblogUpdates

http://rpc.technorati.jp/rpc/ping

http://api.my.yahoo.co.jp/RPC2

http://blogsearch.google.com/ping/RPC2

http://www.blogpeople.net/servlet/weblogUpdates

http://ping.namaan.net/rpc/

http://ping.rss.drecom.jp/

http://ping.blogoon.net/

http://pingoo.jp/ping/

http://hamo-search.com/ping.php

http://www.blogoon.net/ping/

http://www.blogpeople.net/servlet/weblogUpdates

http://blogstyle.jp/xmlrpc/

http://blogsearch.google.co.jp/ping

http://blogranking.fc2.com/tb.php/186415

http://blog.goo.ne.jp/XMLRPC

http://blog.rank10.net/update/ping.cgi

http://blog-search.net/up.php

http://blogstyle.jp/xmlrpc/

http://blogdb.jp/xmlrpc

http://blog.with2.net/ping.php/488844/1182618205

http://api.my.yahoo.co.jp/RPC2

http://ping.bloggers.jp/rpc/

http://ping.rss.drecom.jp/

http://ping.fc2.com

http://ping.blogoon.net

http://ping.blo.gs/

http://rpc.blogrolling.com/pinger/

http://rpc.technorati.com/rpc/ping

http://ping.maplog.jp/

http://ping.namaan.net/rpc/

http://ping.myblog.jp

http://rpc.reader.livedoor.com/ping

http://rpc.technorati.jp/rpc/ping

http://rpc.technorati.com/rpc/ping

http://www.blogpeople.net/servlet/weblogUpdates

http://r.hatena.ne.jp/rpc

SyntaxHighlighter Evolved
HTML、CSS、JavaScript、PHP、C++、ActionScriptなどのソースコードを奇麗に表現する事ができるプラグイン。
(2009.10.18追記)

Simple Tags
よく、記事とコメントの間に「関連する記事」という形で、その記事に対して関連している記事のリンクがあります。「単一記事の投稿」の場所に設置するのがいいと思います。phpコードはたった一行。

<?php st_related_posts(); ?>

(2009.10.30追記)

09-15-09

WPtouchでiPhoneに最適化して表示:WordPress プラグイン

いろいろ便利になっていく世の中。使っているサービスに対してユーザーさんはいい感じにわがままになっていきます。ボクもそのうちの一人。あれができる。これができない。というのが、類似サービスへの浮気なのか正しい選択なのか、ある意味、そのサービスへの期待と、それに答えるデベロッパーの方々のおかげで、改善され更に盛り上がったりします。
そこで、WordPressでiPhone用のページがつくれないものか。探せばプラグインがありました!さすがですね!!

  • WPtouch
  • http://www.bravenewcode.com/wptouch/
  • ダウンロードしたzipファイルを解凍して、出てきたwptouchフォルダーを下記にアップ。

    /wp-content/plugin/

    ダッシュボードからプラグインの設定から、wptouchフォルダーにいろいろ設定ファイルがインストールされます。
    あとはあれをやってみたいですよねー!そう!Safariから「ホーム画面に追加」してウェブクリップのアイコンを登録。設定方法は真ん中のほうにある、Default & Custom Icon Poolから、pngファイルをアップロードしましょう。

    WPtouch

    設定が完了したらiPhoneで確認してみましょー!

    iPhone Safari画面iPhone ホーム画面

    いい感じになりましたね!^-^時間があればいろいろいじってみたいと思います。

    09-09-09

    WordPressに投稿できるScribeFire:Fierfoxアドオン

    このブログはWordPressを使用してます。

    Firefoxで投稿できるアドオンがないかと調べてみたらありますねー!

  • ScribeFire Blog Editor
  • 1.ScribeFireをインストールしてFirefoxを再起動する
    2.WordPressのダッシュボード⇒設定⇒投稿設定⇒リモート投稿の【XML-RPC】にチェックを入れる
    3.再起動したFirefoxでScribeFireを起動する。
    4.ブログのURL、ログイン名パスワードなどを入力して完了

    めちゃ簡単でした!