Wp テンプレートキングのテーマ・カスタマイズ メモ その1

テンプレートキングの公式設定マニュアル

●作業の流れ/その1

1.Wpを公開ディレクトリとは別のディレクトリにインストール
2.Wpの設定、プラグインのインストール・有効化
3.MTのデータをエクスポートとインポートで移行
4.テーマのレイアウトがMTと同じようになるように固定ページやテンプレートをカスタマイズ

※ MT用のテーマと構造が異なっている個所もあるため、注意&工夫が必要
※ 画像やファイルへのリンクは作業その2で設置ディレクトリを変更するため、
あらかじめそちらのURLを設定するのが望ましい。
作業時のディレクトリに(確認のため)画像用ディレクトリを設置する場合は、移行後リンク修正が必要。


・・・・・ MENU ・・・・・  

WPカスタマイズの前に

①ダッシュボードからの基本的なカスタマイズ
②固定ページindexA他を作成(メニュー、ウィジェットパーツとして必要) 
③投稿(ブログ)記事でindexB、概要を作成
④メニューを作成
⑤ウィジェットのカスタマイズ サイドバー
⑥ウィジェットによるカスタマイズ TOPページ:メイン
⑦サイン画像 その他
⑧PHP修正(作業済み)
➈上記の作業をしながらCSSを並行編集(作業済み)   
⑩IEの互換性チェック、CSS修正(作業済み)
⑪設定で各項目を設定する  

【参考】テンプレートキング・マニュアル

その2へ

 

 

●作業の流れ/その2

1.MT で公開パスを変更し、保存用とする(MTのファイルを利用する場合は残す)
2.FTPでrooms内の自分のフォルダをPCにダウンロードしておく(バックアップ用)
3.Wpで公開パスを変更
4.FTPでWpのフォルダとファイルをすべて rooms内の公開URLのディレクトリに移す
5.Wpのダッシュボードに新しいURLでアクセスし、リンクその他をチェック

★WPカスタマイズの前に

ダッシュボードで行うカスタマイズは、固定ページや投稿記事、メニューやウィジェットを利用するので、以下の基本的な作業とその流れを理解しておくと良い。

【固定ページ】
1)-01 カテゴリ別アーカイブの代わりにインデックスページを作成。
プラグインを利用して生成されるショートコードを記入、テキスト、画像は任意で入力、挿入。

kotei-page

①画像を挿入 ②カテゴリ別の記事を古い順から取得するショートコード、取得数も設定可能

 1)-02 HTML投稿用に作成したインデックスページを作成。
MTで作成したページのコードをコピペする。

kotei-page_03

 ※1)-1 と1)-2 は組み合わせが可能。
つまり、HTML投稿の続きをWpで書く場合、MTからコピペしたタグの後などに、
新しいWp記事のカテゴリーのショートコードを記入すれば、HTML投稿とWp投稿を一つのindexに統合できる。

2) オリジナルテンプレートを適用することにより、独自ページが作成できる。
1)-1 の画像 ③ でテンプレートにサイトマップを選択するだけで、サイトマップが生成される。

3)スラッグに決められた名前を入力することにより、トップページにサイト構成要素を作成できる。

kotei-page_02

 

上記では(タイトルまたは)スラッグにwelcomeと入力することにより、ウェルカムメッセージが生成される。
このテーマの場合、作家別メイン画像の挿入が組み込まれていないため、
この固定ページを利用して画像を表示させる(画像の指定はCSSで行う)。

kotei-page_02

【投稿(ブログ)記事ページ】
通常の投稿記事ページ以外に、このWpテーマをMTテーマ(のカスタマイズ)に合わせるため、スラッグ制御(【固定ページ】3)と同様)を利用して投稿記事ページも作品概要として作成、設置する。

【メニュー】
Wpでは(外観>)メニューにより、ヘッダー下のナビゲーションバーやウィジェットで表示させるためのメニューを複数作成できる(ただしこのテーマの場合、ヘッダーナビゲーションはテンプレートに直接書き込む)。
メニューでは、固定ページやカテゴリ、リンクを自由に組み合わせて、表示させる項目のセットであるメニューを作成する。

menu_01

 上の画像はサイドバーの作品リストのメニュー
①メニューの名前を作成、または選択
②固定ページ、リンク、カテゴリーからメニューに加えたいものをチェックし、メニューに追加
③メニュー構造ではドラッグにより上下を入れかることにより、項目の順序を調整
④保存

【ウィジェット】
このテーマの場合、サイドバーだけでなくトップページのメインエリアもウィジェットでカスタマイズできる。

widget-01

利用できるウィジェットから サイドバー1、またはTOPページ:メイン にドラッグ、または「ウィジェットを追加」クリックする。

 widget-02

widget-03

上の画像は、サイドバーの作品メニューの例。
左のカスタムメニューをサイドバーに追加し、①タイトルを記入、②メニューで設定したメニュー名を選択、保存。

【メニューに戻る】

 ●作業その1

※レンガ色が各自設定が必要な部分

Wpを公開ディレクトリとは別のディレクトリにインストール

① ダッシュボードからの基本的なカスタマイズ

外観>テーマ

テンプレートキングの Firstcafe を選択、有効化する

外観>カスタマイズ

サイトのタイトルを入力
固定フロントページは 最新の投稿 を選択

設定>パーマリンク設定>共通設定

◎カスタム構造  を選択し、以下のタグを追加する
/%category%/%postname%.html

プラグイン
>インストール済みプラグイン>

・Akismet/*推奨 有効化 Akismet API キーを登録 Akismet 設定ページで API キーを入力して保存(スパム対策)

>新規追加> 検索から以下のプラグイン名を検索してインストール、有効化
List category posts /***必須 (カテゴリ別インデックスページ作成用
Jetpack /*推奨 Akismet で取得した APIキーを入力する(CSSの機能拡張、アクセス解析など)
BackWPup/*推奨 (データベースを自動バックアップする
Movable Type and TypePad Importer/***必須MTから記事をインポートする場合)
TinyMCE Advanced / ビジュアルエディタに機能を追加したい場合
WP-RSSImport / 他のブログからRSSで記事を取得表示したい場合(単機能ならJetpackで可能)
NewStatPress / アクセス解析 (Jetpack のアクセス解析より高機能でおすすめ)
Better WordPress Recent Comments / *推奨 サイドバーの”最近のコメント”の表示をカスタマイズできるプラグイン
導入後、サイドバーのBW PRC>Template Options>Template for comments に、以下のようにタグを記入する。

<li><span>%author%:</span><span><a href=”%link%”>%post_title%</a>…%time%></span></li>
(<>は半角<>に変更してね)

※必須以外は移行作業が終わってからでも良い

MTから記事を取得する場合(あらかじめMTでブログをPCにエクスポートしておく)

ツール>インポート>Movable Type and TypePad Importer でMTからエクスポートしたファイルを選択し、インポートする
(エラーが出る場合はFTPにてファイルパーミッションを777に変更)

※インポートしたカテゴリのタイトルとスラッグをチェック、修正。プラグインList Category Posts を利用したindexページの作成する場合、英文のスラッグを利用する。また、index用のスラッグもカテゴリーと同じにする(後述)。

※記事をインポートした場合、画像のリンクをチェックすること
ただし、最終的なチェックは公開URLを変更後に行うので、修正する場合はその点を考慮して行うこと

※規定ではファイルサイズが2Mまでなので、以下を参考に.htaccess で32Mまでに変更http://www.ideaxidea.com/archives/2009/02/wordpress_import_hacks.html

【メニューに戻る】

②固定ページindexA他を作成(メニュー、ウィジェットパーツとして必要)

固定ページ>新規作成

  • indexページA・・・WPのカテゴリをプラグインにより古い順にリストアップさせる
    (
    プラグイン List Category Posts を事前にインストールし、有効化しておくこと)

・タイトル/作品名
・スラッグ/カテゴリのスラッグ(半角英数字)と同じにする

・テキスト欄に画像(任意)と以下のタグを入力
【catlist name=”*カテゴリ名(またはスラッグ名)” numberposts=100(表示させたいタイトル数) orderby=date order=asc 】
(【】は、[ ] に変更してね。)
*サイドバーの作品リストに表示させたいカテゴリ分を同様に作成する

#タイトル文字数をトリムし、横並びにしたい場合、以下のようなショートコードを記入する
<div id=”trim”>【catlist name=”カテゴリorスラッグ名” title_limit=15 numberposts=100 orderby=date order=asc】</div>
(<>は<>に、【】は[ ] に変更してね)

また、同じindexページでトリムしたタイトルと、トリムせずタイトル全表示を混在させたい場合、固定ページのショートコードには以下の二つを記入し、その記事の編集ページにもそれぞれのタグ(trim または  no-trim)を記入する。
<div id=”trim”>【catlist name=”カテゴリ名(またはスラッグ名)”  tags=”trim”  title_limit=15 numberposts=100 orderby=date order=asc】</div>
【catlist name=”カテゴリ名(またはスラッグ名)” catlist tags=”no-trim” numberposts=100 orderby=date order=asc】
(<>は<>に、【】は[ ] に変更してね)

(トリムの文字数は適宜変更可能。その場合style.css の要素
#trim UL#lcp_instance_0.lcp_catlist li   の widthプロパティを修正すること)

【参考】 *List Category Posts/How to use…

  • sitemap

・タイトル/sitemap (スラッグもsitemap となっているか確認する)
・テンプレート/ 〔編集〕サイトマップ を選択、保存

  • welcome

・タイトル/welcome(スラッグもwelcome となっているか確認する)
・テンプレートデフォルト、保存

  • プロフィール ・テンプレートデフォルト、保存

③投稿(ブログ)記事でindexB、概要を作成

投稿(ブログ)>新規作成

  • indexページB・・・HTML編集した投稿記事用

・カテゴリに新規にindexを作成
・タイトル/作品名
・スラッグ/MTで作成したindexページと同じに修正する
・テキスト欄にMTのindexページをコピペ
・カテゴリはindexを選択すること

*HTML投稿作品分を同様に作成する

 

  • 概要を作成

・記事タイトル・・・なし
・テキストエリアに概要を記入(MTからコピペして修正する)
・カテゴリーは新規に 概要 を作成し、選択 (投稿(ブログ)>カテゴリー>概要 編集)
・スラッグ・・・gaiyou

【メニューに戻る】

④メニューを作成

外観>メニュー>新規メニューを作成>

  • みんなの遊び場

・メニューの名前/みんなの遊び場

リンクURL・・・http://dal0044.com/oshirase/
リンクテキスト・・・Dal0044からのお知らせ
➾メニューに追加

リンクURL・・・http://dal0044.com/asobiba/hiroba/
リンクテキスト・・・おしゃべり広場

 ➾メニューに追加

 リンクURL・・・http://dal0044.com/asobiba/album/
 リンクテキスト・・・アルバム
➾メニューに追加

➾メニューを 保存

  • 作家’s 作品リスト

・メニューの名前/サイド 作品リスト(archive/作品リスト)
・固定ページ/タブで 全てを選択
・②で作成したindexページにチェックを入れ ➾メニューに追加
・並び順をドラッグで調整
➾メニューを保存

  • その他の記事 等
  • 同様に必要に応じて任意で名前を付け、固定ページやリンク、カテゴリから必要項目を選択し、メニューを作成する

【メニューに戻る】

⑤ウィジェットのカスタマイズ サイドバー

外観>ウィジェット

  • みんなの遊び場

カスタムメニュー➾サイドバー➾ウィジェットを追加、以下を入力

・タイトル・・・みんなの遊び場
・メニューを選択・・・みんなの遊び場
➾ 保存

  •  作家’s 作品リスト

・ カスタムメニュー➾サイドバー➾ウィジェットを追加、以下を入力

・タイトル・・・作家’s 作品リスト
・メニューを選択・・・サイド作品リスト
➾ 保存

  • その他の記事

カスタムメニュー➾サイドバー➾ウィジェットを追加、以下を入力

・タイトル・・・作家’s その他の記事
・メニューを選択・・・サイド 創作メモ&感想
➾ 保存

  • 最近のコメント

・最近のコメント➾サイドバー1 ➾ウィジェットを追加
または BWP Recent Comments
(プラグインを導入した場合)
・タイトル・・・最近のコメント

  • 検索

・検索➾サイドバー1 ➾ウィジェットを追加
・タイトル・・・検索

  • サイトのRSSを購読

RSSリンク(Jetpack)➾サイドバー1➾ ウィジェットを追加
タイトル・・・サイトのRSSを購読
表示するフィード・・・投稿
形式・・・画像リンク
画像サイズ・・・好みで
画像色・・・好みで

  • プロフィールとサイトマップ

ウィジェット >
テキスト➾ サイドバー1
➾ウィジェットを追加
タイトル・・・なし
テキストエリアに以下を記入

<div class=”widget-2″>
<div class=”line-dot”></div>
<ul><li><a href=”http://wp.me/P4f0vM-ho”>プロフィール</a></li>
<li><a href=”http://wp.me/P4f0vM-hl”>サイトマップ</a></li>
</ul>
<div class=”widget-2″></div>
</div>
(<>は半角に変更してね)

【メニューに戻る】

⑥ウィジェットによるカスタマイズ TOPページ:メイン

  • ヘッダー下作家別画像

・事前作業
画像を topimg.jpg という名前で作成(に名前を変更)し、FTPで以下のディレクトリを作成し、アップ

/public_html/rooms/作家名/wp-content/themes/insyoku_f2_tw/images/

(または作成中の/public_html/rooms2/以下同 にアップロードし、ディレクトリを変更した後に修正する)

※固定ページで記事を作成し、名前(スラッグ)に  welcome と入力しておく
(IE6 IE7はこの作業をしないと画像が表示されない)

・ウィジェット> [TOPメイン]ウェルカムメッセージ ➾ 右 TOPページ:メイン に追加

※ このページはメインエリアトップの作家画像を表示させるためだけに作成するもの。
作家画像下にメッセージを書き込みたい場合はウィジェットの テキスト を利用し、直接書き込む
➾➾ ウィジェット>テキスト➾ TOPページ:メインウィジェット

タイトル/任意
テキスト欄にテキストを記入、<p class=”oshirase”></p>タグで囲む
改行は<br/ >で
(<>は半角にしてね)

  • 作家’s TOP記事

ウィジェット
[TOPメイン]新着記事一覧 ➾ TOPページ:メイン に追加
タイトル・・・作家’s TOP記事

  • 外部ブログの記事タイトル一覧を取得 したい場合

(ウィジェットから RSSImport を右TOPページ:メインにドラッグ、設定)
(あるいはJetpackのRSSリンク を右TOPページ:メインにドラッグ、設定)

  • 最近の投稿・メッセージ

・テキスト➾TOPページ:メインに追加
タイトル・・・最近の投稿・メッセージ

・[TOPメイン]トップ表示記事➾TOPページ:メインに追加
※ 投稿記事のタグに トップ表示記事 と入力した記事の more 以前のテキストが表示される

  • 作品概要

[TOPメイン]カテゴリ記事一覧 ➾TOPページ:メインに追加
タイトル・・・作品概要
カテゴリースラッグ・・・gaiyou

【メニューに戻る】

⑦サイン画像 その他

・サイン画像は sign.gifの名前でFTPで以下にアップする
http://dal0044.com/rooms/作家名/wp-content/themes/insyoku_f2_tw/images/

・拍手ボタンと創作メモ&感想へのリンクの入れ方
投稿記事ページに直接以下のHTMLタグを記入する

・創作メモ&感想

<div class=”memo”>
<div class=”memo_link” ><a title=”創作メモ&感想” href=”該当する創作メモ&感想ページのURL”>創作メモ&感想</a></div>
</div>

・拍手ボタン(読んだよ)

<div class=”clap”><script type=”text/javascript” src=”http://dal0044.com/novel/自分のHN(英文小文字)/clap/mwh.cgi?no=拍手ボタンの番 号”></script> ←読んだらクリックしてください。</div>

<>は半角に変更してね。

・前後の記事へのリンクはカテゴリ別に自動挿入されるよう、
indexへのリンクはindex用の固定ページのスラッグをカテゴリスラッグと同じにした場合、そのindexページに自動的にリンクされるようsingle.phpにタグを記入。

【メニューに戻る】

⑧PHP修正(作業済み)

・header.php/ ヘッダー・ナビゲーションリンクを追加記入 ➾ CSS調整
・footer.php/カテゴリーリンク部分をコメントアウト
・header.php/ヘッダー下ナビゲーションバーを追記
・index.php/
・link_sitemap.php/(サイトマップを各自作成、ID番号を記入)
・single.php/パンくずリストをコメントアウト((カテゴリアーカイブリンクが呼び出されてしまうため)、あらたに設定(固定ページで作成したindexをカテゴリスラッグ名と同じスラッグ名にし、ブログインフォURL/カテゴリスラッグ名/を呼び出し、リンクタグでリンクさせる)。
タイトル下日付等修正、サイン画像設定、カテゴリ別前後の記事へのリンクとパンくずリストと同じ方法で INDEX へのリンクを追加。
・sitemap.php/カテゴリリンクを削除、全て固定ページでインデックスを作成し表示させる
・topmain_img.php/headerロゴ背景画像の設定(CSSで再設定したので変更不要だったかも)
・w_new_archive_list.php/通常は初期設定でOK 個人的に特定のカテゴリを非表示にしたい場合にマイナスでIDを設定する
・w_top_archive.php/
・style.css/

※今回は子テーマを作らず、(すべての)テンプレートをそのまま修正、追加していく。

【メニューに戻る】

➈上記の作業をしながらCSSを並行編集(作業済み)

➾ Jetpack の CSS編集を テーマのCSSに転記すること!
CSS編集作業中にメモリーオーバーのエラー、rooms2/vaiの.htaccessにメモリーを倍にするタグを記述(他のWpにもアップしておく)。
また、*が入らなかったり、記述したタグが消えてしまったりする不具合が出てきたので、まだ完ぺきではないけれど、テンプレートのCSSに転記する。

⑩ IEの互換性チェック、CSS修正(作業済み)

⑪設定で各項目を設定する

公開前に特に重要な設定

  • ディスカッション/コメント受付の条件などを設定
  • メディア/サムネールの値をすべてゼロにする(サイズを入れるとサムネールが自動的に生成されてしまい、投稿記事への挿入画像もサムネール表示となるため)
  • パーマリンク設定/カスタム構造を選択し、/%category%/%postname%/ と記入する

 【メニューに戻る】

[注]

MTから記事をインポートする場合、テキスト量が多いと全文がインポートされないため、
MTインポート用プラグインのテキストリミット数を修正。

  1. /wp-content/plugins/movabletype-importer/movabletype-importer.php

    参考サイト
    http://atcentral.blog75.fc2.com/blog-entry-259.html

(2014.2.19)

 ●作業その2へ