WordBench熊本
第3回勉強会
WordPressの基本機能を使ってみる
目次
• WordPressの基本機能を使ってみる
  (建山@aqun00)
• ライトニングトーク
WordPressの基本機能を
       使ってみる
基本機能を使ってWordPressに慣れてみよう




              一緒に
            やってみよう
まず自分のWebサイトに
 アクセスしてみよう
WordPressの基本機能を使ってみる
~Webサイトの確認~
• まず自分のサイトにアクセスしてみましょう
  • http://localhost/(WordPressがあるフォルダ名)(PC)
  • http://ドメイン名 (レンタルサーバ)




    自分のサイトが表
        示
       される
管理画面にログインして
    みよう
WordPressの基本機能を使ってみる
~管理画面にログイン~
• 自分のサイトにログインしてみましょう
  • http://localhost/(WordPressがあるフォルダ名)/wp-admin (PC)
  • http://ドメイン名/wp-admin (レンタルサーバ)




    管理画面にログイ
        ン
ログインして初めに
表示されるダッシュボード
WordPressの基本機能を使ってみる
~ダッシュボード~
• 管理画面にログインしたら初めに表示される画面です。
 自分のサイトの状況や、WordPressフォーラムの最新情
 報などが表示されます。




  Webサイトの状況
   などが見れる
サイトのタイトル、キャッチ
  コピーを設定しよう
WordPressの基本機能を使ってみる
~外観-一般~
• サイトのタイトル、キャッチコピーを決めよう
Webサイトの見た目を変えてみ
       よう
WordPressの基本機能を使ってみる
~外観~
• サイトの見た目や表示にかかわる部分を設定する




        外観
WordPressの基本機能を使ってみる
~外観-テーマ~
• サイトのデザイン・レイアウト・表示内容をまるごと一
気に変更できる。
WordPressの基本機能を使ってみる
~外観-テーマ~
• サイトのデザイン・レイアウト・表示内容をまるごと一
気に変更できる。




               WordPress3.5
             デフォルトテーマの
             TwentyTwelveを使用
時系列な情報を発信するため
     の投稿
WordPressの基本機能を使ってみる
~投稿~
• お知らせ、ニュース、ブログなどの時系列で発信する
 コンテンツに使う

        投稿
WordPressの基本機能を使ってみる
~投稿~
            タイトル

            本文

                       公開
WordPressの基本機能を使ってみる
~投稿~

     投稿前                   投稿後




  2013/1/23の記事   2013/2/4の記事     時
                                 系
                 2013/1/23の記事
                                 列
WordPressの基本機能を使ってみる
~投稿~




     画像、動画、圧縮ファ
     イルなどいろんな種類
     を入れることが出来る
Webサイト上に常に表示したい
    ときの固定ページ
WordPressの基本機能を使ってみる
~固定ページ~
• 会社概要、アクセスページなどの時系列に関係なく、常
に表示したいページに使用



       固定ページ
WordPressの基本機能を使ってみる
~固定ページ~

             タイトル

                本文
                       公開
WordPressの基本機能を使ってみる
~固定ページ~

   投稿前           投稿後




               ページが追加
投稿と固定ページは
なにがちがうの?
WordPressの基本機能を使ってみる
~投稿と固定ページの主な違い~

     投稿                固定ページ



• 時系列に記事を並び替え   • 常に固定表示
• カテゴリーで分類      • カテゴリー分類なし
• タグで分類         • タグ分類なし
• 先頭に固定表示       • 先頭に固定表示なし
• 親子関係なし        • 親子関係がある
• ページテンプレートなし   • ページテンプレートが使え
                る
                      カテゴリとタグは後でやり
                           ます
Webサイトの見た目や内容を変
      更する外観
WordPressの基本機能を使ってみる
~外観~
• サイトの見た目や表示にかかわる部分を設定する




        外観
WordPressの基本機能を使ってみる
~外観~
• 外観のサブメニュー


        テーマ
        ウィジェット
        メニュー
        ヘッダー
        背景
        テーマ編集
外観と言ってもいろいろある
見た目を丸ごと変えるテーマ
WordPressの基本機能を使ってみる
~外観-テーマ~
• サイトのデザイン・レイアウト・表示内容をまるごと一
気に変更できる。
WordPressの基本機能を使ってみる
~外観-テーマ~
              有効化される




 使いたいテーマを有効化
WordPressの基本機能を使ってみる
~外観-テーマ~

  デザイン・レイアウト・表示内容が
  一気に変わる
テーマって実際どこに置いて
    あるの?
WordPressの基本機能を使ってみる
~外観-テーマ~
   WordPress
   インストールフォルダ

    wp-content


       themes


         テーマA

         テーマB
WordPressの基本機能を使ってみる
~外観-テーマ~

   テーマの1つの中身を見ると・・




             ソースコード
             (PHP,CSS)、
             画像などが集まって
             できている!
サイドバーに好きな情報を
配置できるウィジェット
WordPressの基本機能を使ってみる
~外観-ウィジェット~
• サイトのサイドバー、フッターなどに表示する内容を設
定する。
WordPressの基本機能を使ってみる
~外観-ウィジェット~




        追加したい機能を
        ドラッグアンドドロップ
WordPressの基本機能を使ってみる
~外観-ウィジェット~



        ウィジェットが追加される
ナビゲーションバーを自由に
  変更できるメニュー
WordPressの基本機能を使ってみる
~外観-メニュー~
• サイトのナビゲーションバーに表示する項目を設定する。
WordPressの基本機能を使ってみる
~外観-メニュー~
メニューを設定しないと固定ページがナビ
ゲーションバーにすべて表示されてしまう


             ここを自分の好き
             なように操作した
                 い
WordPressの基本機能を使ってみる
~外観-メニュー~


               メニューを作成

追加したページ
をメニューに追加

                       保存
WordPressの基本機能を使ってみる
~外観-メニュー~
        作ったメニュー
        を選んで保存




          メニューで設定した内容
          と同じになる
ヘッダー部分を自分の好きな
ようにするためのヘッダー
WordPressの基本機能を使ってみる
~外観-ヘッダー~
• ヘッダー部分の表示設定を行う
WordPressの基本機能を使ってみる
~外観-ヘッダー~




   ファイルを選択

                アップロード
WordPressの基本機能を使ってみる
~外観-ヘッダー~




サイズを調整


               保存
WordPressの基本機能を使ってみる
~外観-ヘッダー ~

     ヘッダー画像が追加される
背景を変えるための背景設定
WordPressの基本機能を使ってみる
~外観-背景~
• 背景の表示設定を行う
WordPressの基本機能を使ってみる
~外観-背景~
• 背景の表示設定を行う




ファイルを選択


                アップロード
           保存
WordPressの基本機能を使ってみる
~外観-背景~

       背景が変更される
テーマを自分で細かく
カスタマイズするテーマ編集
WordPressの基本機能を使ってみる
~外観-テーマ編集~
• テーマのソースコードの編集を行う




         ソースコードの集まり!
WordPressの基本機能を使ってみる
~外観-テーマ編集~


     Powered by WordPressってなん
     だ?変えたい!

             ・
             ・
             ・
WordPressの基本機能を使ってみる
~外観-テーマ編集~




            footer.phpを選ぶ
WordPressの基本機能を使ってみる
~外観-テーマ編集~



   発見
WordPressの基本機能を使ってみる
~外観-テーマ編集~




        変えてみる
WordPressの基本機能を使ってみる
~外観-背景~

       表示が変わった
機能追加はお手の物
  プラグイン
WordPressの基本機能を使ってみる
~プラグイン~
• サイトに様々な機能の追加を行う
WordPressの基本機能を使ってみる
~プラグイン~

       新規追加
WordPressの基本機能を使ってみる
~プラグイン~


        名前を入れて検索
        (問い合わせフォームの
        Contact Form 7)



        今すぐインストール
WordPressの基本機能を使ってみる
~プラグイン~



     有効化
WordPressの基本機能を使ってみる
~プラグイン~


   メニューに追加
WordPressの基本機能を使ってみる
~プラグイン~
WordPressの基本機能を使ってみる
~プラグイン~




    固定ページに貼り付け
WordPressの基本機能を使ってみる
~プラグイン~

          固定ページ表示したら
          フォームが表示され
          る!
WordPressの基本機能を使ってみる
~プラグイン~
いろいろあります
 お問い合わせフォーム・・ContactForm7
 ソーシャル対応・・WP Social Bookmarking Light
 画像ライトボックス・・WP LightBox 2
 サイトマップ・・PS Auto SiteMap
 画像ウィジェット・・Image Widget

 探す方法の例
 ①検索窓で「wordpress プラグイン やりたいこと」
 ②プラグインクリップサイトPlip(http://www.plugin-clip.com/)
記事を書く人が複数いる場合
   のためのユーザ
WordPressの基本機能を使ってみる
~ユーザー~
• ログインユーザの管理を行う
WordPressの基本機能を使ってみる
~ユーザー ~


          必須項目を入力して
          ユーザを追加
WordPressの基本機能を使ってみる
~ユーザー ~




       ユーザが二人に
WordPressの基本機能を使ってみる
~ユーザー ~


            作成されたユーザ
            でいつもどおり
            ログインできる
Webサイトの基本設定は
     設定で
WordPressの基本機能を使ってみる
~外観~
• 設定のサブメニュー


        一般
        投稿設定
        表示設定
        ディスカッション
        メディア
        パーマリンク設定
WordPressの基本機能を使ってみる
~外観-一般~
• Webサイトのタイトル、説明などの設定
WordPressの基本機能を使ってみる
~外観-一般~
• 投稿に関する設定
WordPressの基本機能を使ってみる
~外観-一般~
• トップページの表示内容や検索エンジン向け設定
WordPressの基本機能を使ってみる
~外観-ディスカッション~
• 記事に対してのコメントを表示するかなどコメント関係
の設定
WordPressの基本機能を使ってみる
~外観-メディア~
• 画像をアップロードした際のサイズの設定
WordPressの基本機能を使ってみる
~外観-パーマリンク~
• WebサイトのURLに関する設定
Webサイトを作るときは設定を
 はじめにしておいたほうが
       いいよ



    後から設定すると、
    いろいろめんどくさ
    い事が起こること
       も・・
カテゴリとタグは
なにがちがうの?
WordPressの基本機能を使ってみる
~カテゴリとタグの違い~

     カテゴリ               タグ



• 投稿記事を仲間に分ける   • 投稿記事の内容の
• 親子関係が作れる        メインとなるキーワード
  • 例)          • 親子関係は作れない
  • 果物=親
    • りんご=子
    • バナナ=子
  • 野菜=親
    • キャベツ=子
    • レタス=子
WordPressの基本機能を使ってみる
~カテゴリとタグ違い~
• 例えば、IT企業サイトの場合

       カテゴリ                   タグ




                       ツイッター
  記
  事記          新着ニュース
   事                   クラウド

                       スマートフォン
  記
  事記
   事          社長ブログ
WordPressの基本機能を使ってみる
~カテゴリとタグ違い~
• 例えば、IT企業サイトの場合

    カテゴリ                     タグ




                      ツイッター
  記
  事記 クラウド    新着ニュース
   事 ツイッター            クラウド

                      スマートフォン

  記
  事記
   事ツイッター    社長ブログ
WordPressの基本機能を使ってみる
~カテゴリとタグ違い~
• 例えば、美的.com




                  カテゴリ
WordPressの基本機能を使ってみる
~カテゴリとタグ違い~
• 例えば、美的.com




                   タグ
テーマ、プラグインで初めは
あれ?と思うかもしれない事
WordPressの基本機能を使ってみる
~あれ?と思うかもしれない事~



           選んだテーマによって
               は
WordPressの基本機能を使ってみる
~あれ?と思うかもしれない事~




        左側メニューにいろい
        ろとメニューが増えた
          りします。
        ちなみにこれはカスタム投稿タイプ・・
WordPressの基本機能を使ってみる
~あれ?と思うかもしれない事~




         プラグインも左側メ
          ニューに増えたり
WordPressの基本機能を使ってみる
~あれ?と思うかもしれない事~




         設定に増えたり・・
WordPressの基本機能を使ってみる
~プラグインのポイント~




          見た目はなにも変わら
          なかったり・・します
WordPressの基本機能を使ってみる
~あれ?と思うかもしれない事~




          テーマ、プラグインは
          作者によってカスタマ
          イズされていて動きが
            違います。
おわり

WordBench熊本第3回勉強会