WordPressレッスンブック Chapter7-3にてサイトを壊してしまうの巻

WordPress レッスンブック 3.x対応

WordPress レッスンブック 3.x対応

 

 Chapter7-3をやってみたら、管理画面が真っ白に!

orz.......

 

デバッグモードでエラーを教えてくれるようなので wp-config.phpの”define('WP_DEBUG', false);”をtrueに。

そうしたらエラーが沢山。

その中に 「add_custom_image_header の使用はバージョン 3.4 から非推奨になっています! 代わりに add_theme_support( 'custom-header', $args ) を使ってください。」というメッセージも・・・

 

この本・・・古いんですね。

 

Amazon見たら新しいバージョンが6月に出版されているし。HTML5だし。

WordPressレッスンブック HTML5&CSS準拠

WordPressレッスンブック HTML5&CSS準拠

 

 

その後も負けずにぐぐって▼これとかいろいろ試してみたのですが治らず。

http://nekonomemo.net/php-warning-cannot-modify-header-information/

 

何だか諦めモードになり、全削除して作りなおしました。

 

良い勉強になった。

新しい情報を探してマルチサイト管理実現しよう

WordPressレッスンブック修了

 WordPressのレッスンブック修了。

("STEP7-3複数のサイトを管理する"を除く・・・) 

WordPress レッスンブック 3.x対応

WordPress レッスンブック 3.x対応

 

 記事&画像のレイアウト、メニューやカレンダー、 コメントとトラックバック

固定ページデザインにトップページ作成、

管理画面でヘッダー&背景画像を変更できるように設定

▼こんな感じに!

f:id:kumajina:20140722143510p:plain

でもなぜか背景画像だけが表示されず。

 

ぐぐってみたところ▼的確な回答を発見!

http://www.amazon.co.jp/review/R3ADHZE3MPZ21D/ref=cm_cr_rdp_perm?ie=UTF8&ASIN=4883377245

”※本書に背景画像を管理画面から変更できるようにするカスタマイズがありますが、3.3.1ですと、bodyにcustom-backgroundというclassを付与する必要があります。加えてこのカスタマイズを実行するとページ最上部にスペースが強制挿入される仕様になっています。コレを解決するにはfunctions.phpにadd_filter( 'show_admin_bar', '__return_false' );を追加する必要があります。”

▼筆者のWEBサイト解説も発見

http://ebisu.com/note/custom_background/

bodyにclassを付与する際は"<body <?php body_class(); ?>>"でもいいらしい。 

”<?php body_class(); ?>”は、ページの判別などに利用できるクラス名を自動挿入するテンプレートタグです。”

とのこと。なるほど。

▼おかげ様で完成

f:id:kumajina:20140722143804p:plain

ドットインストールでは、HTML&CSSブログデザインを作ってから WordPressのテーマに変換する方法でしたが、 レッスンブックでは真っ白な状態から作っていくので、 構造がより良く理解できた気がしました。

ただ1回本を見ながら作っただけでは、まだまだ。

WordPressレッスンブック〜p.89まで学習

ドットインストールで学習したあとはテキストで学習! 

WordPress レッスンブック 3.x対応

WordPress レッスンブック 3.x対応

 

ひだまり日記というブログ&オリジナルテーマを作成するらしい。

今日はp89まで修了

f:id:kumajina:20140716171837p:plain

トップページは結構見た目が整ってきています。

ただ、古い記事のページを表示するリンクが・・・

f:id:kumajina:20140716165615p:plain

なんだかださいです。

 

一気にやる気がなくなってきた所、

テキストに「WP-PageNavi」というプラグインの紹介が!

 

勢いでプラグインインストール。

でもよく使い方がわからず、ぐーぐる先生

WP-PageNavi - WordPressプラグイン - ページナビゲーションを作成 - WordPressの使い方と設定 - Webkaru

 プラグインをインストール後に有効化し、タグを設置したい場所に書き込み、後は管理画面からお好みの設定に変えるだけ。

便利。

 

そして、WPプラグイン 「WP PageNavi Style」で

かっこいいデザインに変更できるらしいので、それもインストール

 

・・・・・

 

でも、何かが変。

f:id:kumajina:20140716172748p:plain

スタイルが反映されていない?

 

 めげずに▼ぐーぐる先生

[太]WordPress自作テーマで、プラグインのCSSが適用されない場合の対処法 | Fujitaiju Blog -There is no border in the Internet!-

 <? php wp_head(); ?>

↑これをheadに挿入したら無事反映! 

f:id:kumajina:20140716165616p:plain

やる気が戻ってきました。

続きはまた今度。

ドットインストール:WordPress入門 (全23回)修了

ついに最後までテーマ作成完了!

f:id:kumajina:20140715145833p:plain

・・・・うん、シンプル。。。

なぜかmenuのリスト部分&リンク部分のデザインが適用されていないし。

 

でも構造がひと通り分かったので

今後は既存のテーマを見ながら&ぐぐりながら変更したり出来そう。

 

ドットインストール:WordPress入門 (全23回) #14まで

無事WordPressの管理画面にアクセスできたので、

やっと準備が整ってドットインストールで学習開始

WordPress入門 (全23回) - プログラミングならドットインストール

今日は#14まで学習。(記事の投稿〜固定ページ作成〜テーマの作成の途中)

 

[テーマ作成部分の流れを簡単にまとめ]

1.) index.html/style.css を作成

▼テーマの画像を準備

直下にscreenshot.png(※まだ出来上がりイメージが無いので、適当な写真を保存)

imgフォルダを作成、noimage.png (100×100)を保存

 

▼HTMLに必要なパーツを作成&CSSでデザイン

body{header(グローバルナビリスト), 記事(各記事(タイトル,meta,内容(写真&本文) ), navigator(prev,next)) sidebar(widgetリスト), footer, }

- Reset CSSおすすめ(CSS Reset - YUI Library

 

2.) WPのテーマに変換

wordpressフォルダ内 wp-content>themes>新しいフォルダを作成(dotinstall)

作成したフォルダ内に1)のHTML&CSS&その他を移動

 ⇒index.htmlの拡張子を→ index.php に変更

 ⇒ style.cssに▼ヘッダー情報を入れる(style.css wordpress codexで検索するとサンプルあり)

/*
Theme Name: Dotinstall
Theme URI: http://dotinstall.com/
Author: Dotinstall
Author URI: http://dotinstall.com/
Description: testtest
Version: 1.0
*/

 

 ⇒管理画面からテーマの切り替えが出来るようになっていた! (*´Д`)オオオオ 

f:id:kumajina:20140713181418p:plain

でもテーマを切り替えてサイトを見ても、まだCSSのスタイルが当たっていない・・・

続きは#15以降ですね