WordPressのスタイルシートのインストール

MovableTypeのデータのWordPressへの移行が完了したので,スタイルシートの変更に取り組みました。

MobableTypeのテンプレートを入手したサイトでWordPressの同様なテンプレートが掲載されていたので,ダウンロードをしました。

WordPressの管理画面から外観/新しいテーマの追加をクリックしてMobableTypeのテンプレートのzipファイルを選んでいますぐインストールのボタンをクリックしました。それでホスト名、ユーザー名、パスワードを入力して開始のボタンを押したのですが、何故か「wp-content ディレクトリが見つかりません。」の表示が出てアップロードができません。いろいろ調べたのですが原因がわからず、テンプレートのzipファイルを解凍してから手動でwp-content/themes/にテンプレートのフォルダごとアップロードしました。

後は、MobableTypeで行ったように、少しずつ修正していきました。

WordPressの場合はテンプレートの項目が無いので外観/編集を選択すると右のほうにテンプレートのパーツ一覧が表示されるので、必要事項の修正ができます。
基本的にはスタイルシートが使われるのでMobableTypeで利用していたテンプレートの内容が参考になります。
でも修正したものを実際にブログ上に反映できないので,エディターでファイルを修正して手動でアップロードしました。

苦労しながら,色やフォントや項目の並び替えをしました。

MobableTypeではカタゴリの表示の順序の変更のプラグインを利用していたのですが,探すとWordPressでもCategory Orderという同じようなプラグインがありました。http://www.coppit.org/code/ (英語版です)。とても使いやすくて便利です。

サイドバーにリンクのコードを直接入力すると文字化けして使えません。WordPressの管理画面でリンク/新規追加で登録してサイドバーにはリンクを読み込むタグを入力しなければいけません。
サイドバーの部分に直接文字を入力しても文字化けしないように対処しないと自分の思うようなブログにできないので、なんとか解決しなくてはと調べたのですが、普段使っているエディター(自分の場合は秀丸)でファイル(今回はsidebar2.php)を開いてエンコードの種類をUTF-8にして保存しなおしアップロードすることで解決しました。

サイドバーの幅の設定は
/* 3カラムリキッド */
.layout-three-column-liquid #content {
width: 100%;
margin: 0 -200px;
height: 100%; /* for IE6 リサイズで中央カラムが右寄りになるのを防止 */
}
.layout-three-column-liquid .blog {
margin: 0 200px;
padding: 10px 15px 5px;
border-bottom: 1px solid #f1b974;
border-left: 1px solid #f1b974;
border-right: 1px solid #f1b974;
height: 100%; /* for IE6 */
}
html>body.layout-three-column-liquid .blog {
padding: 10px 10px;
}
上記の赤色の文字の数字を変更する事でできました。

サイドバーの1行に表示できるリンク先のサイト名の文字数の設定をどうしたらできるか判らなく、苦労したのですが
/* menu list of sidebar */
#links-left ul,
#links-right ul {
color: #444;
}

#links-left ul li,
#links-right ul li {
list-style: none;
margin: 0 0 15px 0;

}

#links-left li li,
#links-right li li {
background: url(images/lmark.gif) no-repeat 0 0.5em;
padding-left: 10px;
margin: 0;
width:170px;
}

#links-left ul ul,
#links-right ul ul {
margin: 0;

}

上記のコードにwidth:170px;を挿入すると問題は解決しました。数字170は1行に表示する文字列の幅です。

サイトマップを表示するプラグインも導入しました。
Dagon Design Sitemap Genereratorというプラグインです。
ダウンロードして解凍して/wp-content/plugins/にアップロードして,管理画面のプラグインをクリックしてDagon Design Sitemap Generatorの使用するをクリックして,管理画面に戻って外観/DDSitemapGenをクリックして言語をJapaneseにして,投稿/新規追加で投稿画面に
<!– ddsitemapgen –>
と投稿します。
ちなみに<!– ddsitemapgen –>という文字をHTML投稿画面で投稿するとその位置にサイトマップが表示されてしまいますので<!– ddsitemapgen –>という文字を投稿したい場合はその部分だけでもビジュアル投稿画面で投稿すると付帯情報無しでテキストだけを入力できます。
題名はsitemapとかサイトマップとか入れておきます。
常にサイトマップへのリンクを表示させるためにsidebar.phpも書き換えてリンクを挿入しました。

googlemapを使うためのプラグインを導入しました。
Google Maps Anywhereというプラグインです。
ダウンロードして解凍して/wp-content/plugins/にアップロードして,管理画面のプラグインをクリックしてGoogle Maps Anywhereの使用するをクリックして,必要に応じて同画面の設定をクリックして初期の地図の大きさなどを設定します。
Google Maps Anywhereを使用するにはGoogleマップ API キーを取得する必要があります。初期の地図の大きさなどを設定した画面からサインアップして使うサイトのドメイン(きまっし金沢の場合はhttps://kimassi.net/)を登録します。きまっし金沢と同じドメインで使用しているサイト,ブログなどすべてで使用できるようになります。
投稿画面のアップロード/挿入の横にGoogleマップを追加のロゴが出現するので,地図を入れる時は,そのロゴをクリックします。

WordPressインストール時からアップロードされていたプラグインAkismetを使用する設定にしました。標準装備の強力スパム対策用のプログインです。Akismetを使用するにはAPIキーを入手しなくてはいけません。WordPress.comに入って会員登録するとAPIキーがメールで送られてきます。会員登録の際にはブログを作るという選択はする必要はありません。メールで送られてきたAPIキーを入力することでAkismetが有効になります。

ついでにWordPressインストール時からアップロードされていたプラグインWordPress Database Backupを使用する設定にしました。WordPressはサイトの全ての情報がMySQLに収納されていますので,定期的にデーターベースをバックアップしておかないとトラブルがあった時は大変です。これも最初はうまく動作しなかったのですが,wp-content/backup-e1eceというフォルダを手動で設置すると動作しました。フォルダの属性は706にしておきました。バックアップは1週間に1度の設定にしておきました。メールでのバックアップになります。

とりあえず,これでWordPressのカスタマイズは完了しました。

コメントを残す

メールアドレスが公開されることはありません。