WordPressで無料テーマAttitudeを使ってのサイト制作

前回、WordPressをインストールまで行いましたので、
今回は、サイト構築を行ってみようと思います。

もちろん、私は普段から制作は行いませんので、
内容は超初心者向けです。

制作サイト

業種：歯科医院
ページ数：10ページ程度

ほかの内容は全然決めていない状態でスタートしました。

まず、初めに行ったのは、テーマの選定です。
テーマとは、一般的なブログで「テンプレート」と呼ばれるものに当たります。
サイトのレイアウト（1カラム、2カラム、3カラムなど）や表示する画像、
使える機能まで変わってきます。
WordPressのテーマは、無料のものが非常にたくさん公開されています。自分に合いそうなテーマを探してみてください。

何も内容を決めないままスタートしていますので、
もちろんテーマが決まりません。

なので、せめてメニュー構成を決めました。
グローバルメニュー
・診療方針
・診療科目
一般歯科
小児歯科
口臭歯科
予防歯科
歯周病
ホワイトニング
・初めての患者様
・アクセス

グローバルメニューを決めたところで、
再度テーマ探しを行いました。
テーマの設定は「外観」の「テーマ」で検索して設定できます。

テーマを選んだ手順としては、
1.デザインでテーマを選ぶ。
2.インストールしてテーマ有効にする。
3.触ってみて使いやすいか判断する。
この1～3を繰り返して選びました。
もしかすると、もっといい選定方法があるかもしれませんが、
初心者の私にはこの方法しか思いつきませんでした。

色々見た結果、今回は「Attitude」というテーマを使用しました。
h_blog2_1

評判もよさそうなので、使用してみました。

参考までにダウンロードしたテーマ名も上げます。
・Customizr
・i-transform
・isis
・Minamaze
・Nictitate
・Pinboard
・Sugar and Spice
・WPMEMO basic

ここからは、「Attitude」というテーマ使い方になります。

もう少し詳しく説明を３回に分けて行います。

1.WordPressの無料テーマAttitudeの使い方
2.WordPressの無料テーマAttitudeの使い方（固定ページ活用方法）
3.WordPressの無料テーマAttitudeの使い方（フッターエリア使用方法）

今回行った作業
1.メニュー項目の設置
2.スライダーの設置
3.診療科目をトップページへ掲載

1.メニュー項目の設置
事前に決めたグローバルメニューを登録します。
ダッシュボードの「外観」→「メニュー」から登録します。
デフォルトですので、テーマによって登録方法は変わっていません。

2.スライダーの設置
このテーマでスライダーを設置するには、
投稿を使います。

記事でスライダー？と思う方がいると思いますが、
記事のアイキャッチを使用してスライドショーに画像を設定します。

記事の設定が終わったら、
テーマの機能を使いスライダーの設定を行います。
「外観」→「Theme Options」→「Featured Post/Page Slider」
を選択します。
「Featured Post/Page Slider Options」の中に
投稿のIDを設定できますので、
スライダー用に投稿したIDを設定します。

以上で、スライダーの設定は終了です。

3.診療科目をトップページへ掲載
トップページに紹介したい診療科目を作ることにします。
診療科目のページを固定ページで作成します。

ページを作るときにアイキャッチを設定すると、
トップページでアイコンとして表示されます。

掲載したい固定ページができたら、
「外観」→「ウィジェット」を開きます。
テーマの独自機能の
「Business Page Sidebar」→「Theme Horse: Services」
に登録した固定ページを選ぶことができるので、
選択します。

これだけで、トップページにも情報を掲載できます。

以上の作業をした結果がこちらです。

なんとなく、ホームページらしくなっています。
ここまで、たどり着くまでにコードを一つも書いてませんので、
素人の方も、ぜひトライしてみてください。

記事の一覧に記事の最初の画像を表示する(アイキャッチではなくて)

ちょっと自己紹介

こんにちは？皆さんのところはもう夏ですか？？

僕の住む新潟はまだ梅雨明けしていないので、もう少ししたら夏が来るのだと思います。
新潟では夏になると色々なところで夏祭りがあって、花火が上がります。

有名なところだけでも長岡の花火や、片貝の花火、柏崎の花火も有名ですね！

さて、自己紹介が遅れましたが…

はじめまして、yasaiです。基本的にHTML書いたり、CSS書いたり、jQuery書いたりしてます。

ムズカシイことはできないので、日々勉強中です！(できるようになりたいのです)

ここでは日々ハマったことや、ちょっと気が付いたことを書いていこうと思います。

今日はWordpressのお話です。

記事の一覧に記事の最初の画像を表示する(アイキャッチではなくて)

トップページなんかで、カテゴリー記事の一覧を表示する、よくあるパターンです。

文字だけだとさみしいので画像も載せたいなと思ったので、調べてみました。

アイキャッチ画像使うと簡単なんでしょうが、クライアントワークだとアイキャッチの設定をしてもらうより、記事の一番最初の画像を表示してしまった方がよいことってありませんか？

まずはfunction.phpに以下を加えます。


function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
     $output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);

    $first_img = $matches [1][0];

if(empty($first_img)){ //Defines a default image
        $first_img = "dummy.jpg"; 
    }
    return $first_img;
}

まず投稿内に画像があるかどうかを調べます。ある場合には$first_imgに最初の画像を格納します。

画像がなかった場合は、$first_imgにdummy.jpgを格納します。(※dummy.jpgは用意してください。)

これであとはcatch_that_imagedeで呼び出すことができました。


<img src="<?php echo catch_that_image(); ?>" alt="">

参考にさせていただいたサイトです。

このように参考にさせていただいたものや、自分で思いついたことを備忘録のように書いていきます。これからもお付き合いください。よろしくお願いします！

WordPress超初心者がインストールしてみました。

AGNのwebチームでブログを始めることにしました。

制作実績や面白そうな情報、制作上の体験談などを更新していきます。

いろいろな方が更新していきますので読みにくいことがあるかもしれませんがご了承ください。

普段はディレクター？をしている「H」が初めて、このブログを作るためにWordPressをインストールしてみました。
「今更～！？」って声はあるでしょうが、お客様に説明する立場の私がWordPressをいじったことがないというのもいかがなものかと思い。トライしてみました。
もちろん、初めてインストールしていますので、すべてデフォルトのままです。テーマなどは設定はしておりません。のちに機会があれば設定してみようと思います。

WordPress超初心者の私が手動インストールで手順をまとめます。

WordPressを設定するのに準備するもの
・PHPとMySQLが使えるwebサーバー
・ドメイン
・WordPressのファイル

●PHPとMySQLが使えるwebサーバー

レンタルサーバーのことです。ただし、どこでもいいわけではありません。

PHPとMySQLが使えるという条件がつきます。
（バージョンの確認も必要）
※PHP・・・汎用スクリプト言語　　　MySQL・・・データベース
元々、使えないサーバーもありますし、契約プランによっては使用できないものもあります。
サーバーによっては「WordPress簡単インストール」みたいなサービスを行っているところがありますので、サーバーとプランを確認上で、契約しください。（※ここで説明している手順は手動でインストールする方法です。）

レンタルサーバーの紹介は、機会があればしてみたいと思います。

レンタルサーバーと契約を行ったらMySQLの設定を行う必要があります。契約のレンタルサーバーによって設定方法が違いますので、別途確認してください。
WordPress設定時に必要となるデータベースの情報
・データベース名
・ユーザー名
・パスワード
・データベースのホスト名

●ドメイン

レンタルサーバーの契約をしたらドメインを取得しなければいけません。
お名前.comなどで取得して契約したレンタルサーバーの情報をドメインに設定します。

●WordPressのファイル

ここまで準備できたら、やっとWordPressのインストールを行えます。

1.WordPressファイルのダウンロード
まず、WordPressで検索して、WordPress日本語版公式サイトからダウンロードします。

ホーム

2. 契約したレンタルサーバーにアップロード

ダウンロードしたデータを解凍し、wordpressという名前のフォルダを、
契約したレンタルサーバーにFTPでアップロード。
wordpressフォルダは容量大きいので（10MB以上）ffftpでアップロードするとデータが全部上がりきらなかったりする事もあります。

3.WordPressにデータベースの設定をしてログインする。
ブラウザで http://自分のURL/wordpress/ を開きます。

設定画面が表示されるので、入力を進めます。

レンタルサーバーで行ったMySQLの設定を入力します。
・データベース名
・ユーザー名
・パスワード
・データベースのホスト名

5番目の枠は今はこのままでいいです。
複数個 WordPressを設置したい時は、設定毎にここを変えてください。

サイト情報を入力します。

ここで設定する「ユーザー」と「パスワード」はログイン時に必要となりますので、必ずメモしておきましょう。
サイトが完成するまでは、プライバシーのチェックを外しておきます。
未完成でリンク切れが沢山あったり、表示も変な状態の時にGoogleに見られて評価を下げられるのは嫌なのでそうしています。
完成したら管理画面から戻せるので、忘れず戻しておきましょう。

初期の設定は終了です。

先ほど設定した「ユーザー」と「パスワード」で
WordPressにログインいたします。

4.管理画面で最低限の設定をする。

これでインストールは完了しています。
すべてデフォルトの状態ですが、ブログとしては公開できます。
最低限の設定、日本語を表示させる設定をだけはしましょう。

左メニューの「プラグイン」を押します。
インストール時に3つ入っていると思いますが
「WP Multibyte Patch」というのを「有効化」します。
これで、最低限の設定は終わりです。

今の段階では、最低限の設定しかしていませんので、
自分好みのサイトにしていくには
テーマの編集やプラグインの設定のなど
まだまだ、やることは沢山あります。

興味がある方がいましたら、ぜひトライしてみてください。