Cat Speak

札幌在住のWebデザイナー・コモモのブログ

ホーム > ウェブ制作Tips > WordPress > 「WordPress デザインワークブック 3.4対応」を執筆しました!

「WordPress デザインワークブック 3.4対応」を執筆しました!


田中広将さんと共著で、はじめての書籍「WordPress デザインワークブック 3.4対応」を執筆させていただきました。昨日(7月4日)からAmazonで予約を開始しています。

Amazonでの予約はこちらから

はじめての経験で色々と大変でしたが、無事に書き上げることができてほっとしています。


昨日、試しにTwitterでつぶやいてみたら、色々な方からRetweetやメッセージをいただけて、とても嬉しいです。本の内容がほとんどわからない状態なのに、既に予約してくださった方もいたようで、みなさまに本当に感謝感謝です。期待にそえる書籍になっていたらいいなぁと妄想中です(^_^)

追々書籍の紹介ページも作れたらいいなと思っていますが、簡単に概要をちょっとだけ紹介します。

前半は、美容室のサンプルサイトを元に一連のWordPressテーマ作成の手順を紹介しています。

次に、クレープ屋さんninoの作例を元に、オリジナルテーマ作成のヒントになるような応用テクニックを紹介しています。
※実サイトと書籍のサンプルとは、少し構成を変更しているところがあります。

2つのサンプルを元にWordPressの利用の仕方を覚えたら、さらにWordPressについて理解を深められるように、覚えておくと便利なphpの記述方法やphpの基礎を紹介しています。

どんなコンセプトで執筆させていただいたのか、書籍の「まえがき」に集約しました。言いたいことを全部書いてみたら、長くなってしまって、ページに収まらずカットしたところがあるので、最初に書いたものをそのまま掲載します。


まえがき

ブログツールとして誕生したWordPressが、ウェブサイト制作のためのコンテンツマネジメントシステムとして人気を博すようになってから、しばらく経ちました。

私とWordPressの出会いは、2008年のことです。
ウェブデザイナーとして制作会社に勤務していた私は、クライアントの要望に応えるため、WordPressを利用し始めました。
当時は、CMSとしてのWordPressの人気はまだ不動のものではありませんでしたが、他のCMSと比較し、オープンソースだったこと、インストールが驚くほど簡単だったことが利用するきっかけとなりました。

プログラムの知識もほとんどなかった私にとって、WordPressのテーマ制作を習得するのは簡単なことではありませんでした。
今思い返すと、当初は目前の案件を形にすることばかりを考えて、WordPressの考え方や本質を理解しようとしていなかったから難しく感じたのだとわかります。
WordPressはプログラムの知識のない方でも気軽に始められるように、定型的な記述で多様なサイトを作ることができるようになっているので、HTMLとCSSさえ習得していればテーマ制作の最初のステップはそう難しいものではないのです。

本書は、WordPressによる本格的なサイト制作を行い、クライアントワークでWordPressを生かすことを目的としている全てのウェブデザイナーに向けて執筆させていただきました。
一番の特徴は、サンプルサイトを元に、実際のサイト制作のワークフローに沿って開発環境で作業を進めるところからスタートし、本番サーバへの移行やバックアップの方法まで、クライアントワークで必要になってくる実践的なノウハウを数多く掲載しているところです。
私が経験して来た躓きや失敗を繰り返さず、WordPressの本質を理解しながら習得していってほしいと願っています。

そして、私がWordPressを面白いと感じるのは、気軽に始めたのにも関わらず、いつの間にかより深くプログラムを理解したいと考えるようになることです。
これは、WordPressがPHPのプログラムそのものであり、PHPのプログラムを書けるようになれば、自身で拡張していくことができるためだと思います。
WordPressは、その魅力にはまった多くのユーザーによって、コミュニティーがとても発達しています。
最初は手探りでテーマ制作をはじめた私でしたが、多くのユーザーによるブログやフォーラムのTipsに助けられ、少しずつ成長していくことができました。

今回の執筆にあたり、プログラマである共著の田中広将さんの力添えで、WordPressを理解する上で必要となってくるPHPの基礎や、実際のサイト制作で覚えておくと便利なPHPの記述方法なども紹介させていただくことができました。
正直なところ、本書ではプログラムの知識のない方には少し難しいと感じるかもしれないPHPのコードも紹介していますが、私の考えではコードを全て読み解けるようになる必要はないと思っています。
なぜかというと、クライアントワークでは、できること、できないことを判断することの方が重要であり、WordPressで何ができるかを知ってさえいれば、自分でかけなくても誰かに依頼したり聞いたりすることができるからです。
そのためには、コードがかけるかどうかより、WordPressの本質を理解することが不可欠です。
こうして私の考えていたことを1冊の書籍としてまとめることができてとても嬉しく感じています。
本書がWordPressの魅力を伝える一助となれば幸いです。

最後に、私が本書を執筆するきっかけは、札幌のウェブデザイナー・コーダーのための勉強会SaCSS(Sapporo.CSS)に参加し、そこで出会った共著の田中広将さんにお声がけいただいたためです。
SaCSSに参加することで、ブログやフォーラムでいつもお世話になっていたWordPressユーザーの方とも実際にお会いして、お話させていただくこともできました。
参加する前は、とても狭い世界で考え、仕事をしていたと思います。
このような機会を与えてくださったSaCSS主催の長谷川広武さん、参加者の皆さんに感謝しています。ありがとうございました。

高橋朋代


個人的には、技術書は安くはないし、一度買っていただいたら、長く役立ってもらえる本になりたいなぁと思っていました。その分、細かいところまで手取り足取り・・という感じではない部分もあるかもしれないのですが、WordPressの全体像や考え方を理解するための本と位置づけていただけたら・・と思います。

追記:田中さんのあとがきもぜひ

8 Responses to “「WordPress デザインワークブック 3.4対応」を執筆しました!”

  1. […] ずっと待ってたWordPress デザインワークブック 3.4対応が予約可能になってたのでさっそく予約注文してみました。届くのはまだ少し先ですが楽しみです。しごとで WordPress を使うようになってからオリジナルテーマ設計の難しさを痛感していたのですが、次のステップに向けてチャレンジしてみたいと思います。 参考記事 / ひろましゃ・コモモさん […]

  2. 小林さおり より:

    高橋朋代様

    こんにちは、先日いろいろご相談メールをしておりました小林さおりと申します。書籍完成おめでとうございます。まえがきの高橋様の思いや今までのご経験など読ませていただき、まさに今の私に必要な本!と思いました。まさに「気軽に始めたのにも関わらず、いつの間にかより深くプログラムを理解したいと考えるように・・・」というあたり、本当に痛感しております。早速予約します。手元に来るのが待ち遠しいです。それでは・・・・

  3. コモモ komomo より:

    小林さん、ありがとうございます!書籍が役立ってもらえたら嬉しいです^^

  4. 内田達二 より:

    高橋朋代様

    はじめまして。「WordPress デザインワークブック 3.4対応」を教科書にWordPressの勉強をしております,内田達二と申します。NPOのWebページ製作にWordPressを導入することを思い立ち,Bicカメラの書店で成書を様々みた結果,デザインワークブックを手に取りました。WordPressに触ったことが全くなかったのですが,初心者でも分かりやすく解説頂いているので,少しずつソースコードをいじりながら勉強ができ,とても重宝しております。当初は勉強のつもりでやっていたのですが,NPOのメンバーよりデザイン面でもいいと言われ,ninoのテーマでHPを運営させて頂いております。

    今回は,トップページにサイドバーを表示させる方法につきましてヒントを頂きたくご連絡を差し上げました。ワークブックP169にテーマ内の様々な場所にサイドバーを設置できるとありましたので,トップページにできないかと試行錯誤したのですが,うまく行きません。
    管理画面 > 外観 > ウィジェットに,Front Sidebarが表示されるので,そこに項目を追加すると,サイドではなく,スペシャルメニューの下段にサイドバーが表示されます。
    プログラムのことがほとんど分かりませんので,全てコピペしかできないのですが,以下のようなことをやってみました。

    1) Function.phpに以下を追加。
    ・・・・
    /**
    * サイドバー登録(トップページ・サイドバー)
    */
    register_sidebar(array(
    ‘name’ => ‘Front Sidebar’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    ));

    2) front-page.phpに下記を追加。
    ・・・・・

    3) front.cssに下記を追加。
    ・・・

    /*—————————————————–
    side
    —————————————————–*/

    #side {
    width:275px;
    float:right;
    line-height:150%;
    }
    #side a {
    text-decoration:none;
    }
    /*sideBanner*/
    #side .sideBanner {
    margin-bottom:10px;
    }
    #side .sideBanner img {
    margin-bottom:5px;
    }

    /*sideNav*/
    #side .sideNav {
    margin-bottom:10px;
    }
    #side .sideNav h2 {
    color:#745c05;
    font-size:107.7%;
    background:url(../images/line.png) no-repeat bottom;
    padding:10px 0;
    }
    #side .sideNav ul li {
    margin:8px 0;
    font-weight:bold;
    }
    #side .sideNav ul li a {
    padding:2px 2px 2px 15px;
    background:url(../images/arrow02.png) no-repeat left;
    }
    #side .sideNav ul li a:hover {
    text-decoration:underline;
    }

    #side .sideNav .entry {
    padding:5px 0;
    border-bottom:1px dotted #ae8a05;
    }
    #side .sideNav .entry p.date {
    font-size:84.6%;
    }
    #side .sideNav .entry p.excerpt {
    font-size:92.3%;
    }

    /*biggerlink*/
    #side .sideNav .bl-hover {
    cursor: pointer;
    background-color: #f9e082;
    }

    /*textwidget*/
    #side .textwidget {
    padding:5px 0;
    }

    #side .recentcomments a {
    padding:2px 2px 2px 15px!important;
    }

    /*widget_EventReport*/
    #side .widget_eventreport {
    background:#FFF;
    padding:6px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    }
    #side .widget_eventreport h2 {
    border-bottom:1px dotted #ae8a05;
    padding:5px;
    background:none;
    }
    #side .widget_eventreport img {
    padding:5px 10px 5px 5px;
    float:left;
    }
    #side .widget_eventreport p {
    font-size:92.3%;
    margin:10px 0;
    }

    /*biggerlink*/
    #side .widget_specialcrepe.bl-hover {
    cursor: pointer;
    background-color: #f9e082;
    }

    /*navSub*/
    #side .navSub {
    margin-bottom:10px;
    }
    #side .navSub h2 {
    color:#745c05;
    font-size:107.7%;
    background:url(../images/line.png) no-repeat bottom;
    padding:10px 0;
    }
    #side .navSub ul li {
    margin:8px 0;
    font-weight:bold;
    }
    #side .navSub ul li a {
    padding:2px 2px 2px 15px;
    background:url(../images/arrow02.png) no-repeat left;
    }
    #side .navSub ul li a:hover {
    text-decoration:underline;
    }

    #side .navSub .entry {
    padding:5px 0;
    border-bottom:1px dotted #ae8a05;
    }
    #side .navSub .entry p.date {
    font-size:84.6%;
    }
    #side .navSub .entry p.excerpt {
    font-size:92.3%;
    }

    お忙しい中,申し訳ありません。どうぞよろしくお願いします。

  5. 内田達二 より:

    高橋朋代様
    先日は,突然のご連絡してすみませんでした。CSSファイルを修正したらレイアウトが変わることが確認できました。少しずつ,勉強して行きたいと思います。失礼いたしました。

  6. コモモ コモモ より:

    内田様
    こんにちは。WordPressデザインワークブックは、主にWebデザイナーやコーダーを対象にしていて、HTML/CSSは習得済みであることを想定し、WordPressの独自タグのみ解説しています。HTML/CSSの解説はほとんどしていないので、別の書籍にてHTML/CSSについて学習することをお勧めします。拙著で、作りながら学ぶHTML/CSSデザインの教科書も出版しているので、よろしければご参考ください。

  7. 内田達二 より:

    高橋様
    コメント有難うございます。ご連絡が遅れて申し訳ありません。
    高橋様のご著書は実際,コードをいじりながら出来る所が素晴らしいと思っております。
    Kindle版もあるようですので,購入して夏休みに少しずつやっていきたいと思います。
    どうも有難うございました。

  8. コモモ コモモ より:

    ありがとうございます!夏休み頑張ってください(^ ^)

コメントを残す

人気の記事