パーフェクトダッシュボード

パーフェクトダッシュボード
WordCamp Kobe 2013
2013/6/15
細谷崇（@tkc49）

２限目を担当させて頂きます。
細谷です。

毎月WordPressの
個別相談会を開催しております。

あとお酒を飲みながらWordPressネタを
話し合うWordBar堺！

初心者の方を対象とした質問しやすい場つく
りたいと思い開催をしています。

今回の授業は、そんな初心者の質問の中から
出てきたもので、

そんな小難しいことしなくても・・・

実はそれ管理画面で出来ますよ？

全部で９つのチップスを用意しました

基本的なことが多いのですが、

どれか１つくらい・・・
参考になるものがあればと思います。

あとこの資料は後日ネットで公開をします。
Twitterで公開先のURLを連絡します。

では、宜しくお願いしますm(__)m

コーポレートサイト＋Blogサイトの併用
其の１

架空のミュージシャンサイトを例に
説明をさせて頂きます

こんなことしてませんか？

カテゴリを使ってBlogページを作成

これでも実現はできます。

でも、更新担当者の方に・・・

必ず「ブログ」カテゴリーに✔を入れてね！

でも、これには回避する方法があります。

カテゴリーの✔を忘れた場合、
必ず「ブログ」カテゴリーに✔が入ります。

これでひとまず安心・・・

「ブログ」って表示されてカッコ悪い

テンプレートのコードを書き換えれば、
非表示にするのは可能

wp_list_categories(
exclude=非表示にしたいカテゴリーのID
);

ノンプログラマーはコードを書き換えるのは
気が引けますよね・・・

あとサイドバーはウィジェットの方が
機能追加や、並び替えが簡単に出きて便利

特定のカテゴリーの非表示の設定が出来ない

「ブログ」カテゴリを利用したBlogページ
を作成するのは、大変です。

実はそんなことしなくても、Blogページを
簡単に追加出来ます。

「フロントページの表示」の設定をしよう！

①まず固定ページを作成

②次に「フロントページの表示」を設定

③次にカスタムメニューに追加

④最後にテンプレートの作成

サイトのトップページとBlogのトップページ
とではレイアウトが異なる

ロゴ
グローバルメニュー
スライダー
お知らせ
バナー
バナー
バナー
ロゴ
記事タイトル
アイ
キャッチカテゴリー
アーカイブ
月別
アーカイブ
カレンダー
記事抜粋
アイ
キャッチ
アイ
キャッチ
アイ
キャッチ
アイ
キャッチ
記事タイトル
記事抜粋
記事タイトル
記事抜粋
記事タイトル
記事抜粋
記事タイトル
記事抜粋

ロゴ
スライダー
お知らせ
バナー
バナー
バナー
ロゴ
記事タイトル
アイ
アーカイブ
月別
アーカイブ
カレンダー
記事抜粋
アイ
キャッチ
アイ
キャッチ
アイ
キャッチ
アイ
キャッチ
記事タイトル
記事抜粋
記事タイトル
記事抜粋
記事タイトル
記事抜粋
記事タイトル
記事抜粋
トップページブログトップ

フロントページの表示が設定済で

ロゴ
スライダー
お知らせ
バナー
バナー
バナー
ロゴ
記事タイトル
アイ
アーカイブ
月別
アーカイブ
カレンダー
記事抜粋
アイ
キャッチ
アイ
キャッチ
アイ
キャッチ
アイ
キャッチ
記事タイトル
記事抜粋
記事タイトル
記事抜粋
記事タイトル
記事抜粋
記事タイトル
記事抜粋
<body class="home page page-
id-79 page-template-default
logged-in admin-bar no-customize-
support single-author">
<body class="blog logged-in admin-
bar no-customize-support single-author">

ロゴ
スライダー
お知らせ
バナー
バナー
バナー
ロゴ
記事タイトル
アイ
アーカイブ
月別
アーカイブ
カレンダー
記事抜粋
アイ
キャッチ
アイ
キャッチ
アイ
キャッチ
アイ
キャッチ
記事タイトル
記事抜粋
記事タイトル
記事抜粋
記事タイトル
記事抜粋
記事タイトル
記事抜粋
front-page.php home.php

ロゴ
スライダー
お知らせ
バナー
バナー
バナー
ロゴ
記事タイトル
アイ
アーカイブ
月別
アーカイブ
カレンダー
記事抜粋
アイ
キャッチ
アイ
キャッチ
アイ
キャッチ
アイ
キャッチ
記事タイトル
記事抜粋
記事タイトル
記事抜粋
記事タイトル
記事抜粋
記事タイトル
記事抜粋
front-page.php home.php
page.phpを
コピーして作ればOK
index.phpを
コピーして作ればOK

この様にすると「ブログ」カテゴリーみたい
な余分なカテゴリー作成しなくて済みま
す。

余分なカテゴリーが表示されなく
てスッキリ！

てスッキリ！
小難しいコードを書く必要なし
（wp_list_categories)

てスッキリ！
小難しいコードを書く必要なし
（wp_list_categories)
レイアウトの変更もラクラク！
(homeクラス、blogクラス、
front-page.php,home.php）

固定ページ毎にレイアウトの変更
其の２

例えばこんな感じです。

あるページは横幅フルワイド

あるページはサイドバーあり

こんな時どうします？？？

サイドバーにウィジェットを
表示

スラッグが「news」
「biography」「goods」の
場合、サイドバーを表示

でもこんなことしたら・・・

ユーザーが新しいページを作成する度
に・・・

実はそんなことしなくても、固定ページ毎に
レイアウトの変更は出来るんです！

ページテンプレートを作成しよう！

固定ページにはテンプレートを選択できる
機能があります。

初期設定では、「デフォルトテン
プレート」が選択されている。

ここの設定でサイドバーなしの
テンプレートを選べれるようにし
ます！

ページテンプレートの作成は
すごく簡単です

①page.phpを複製し任意のファイル名にす
る

②no-sidebar.phpを
ページテンプレート化する

「Template Name: 任意の名前」
を書いてあげるだけで
テンプレートページの完成
※日本語もOK

サイドバーは必要ないので削除

サイドバーを表示しな
いようにできる

メインコンテンツの横
幅がフルに広がってい
ない

その時はbodyのクラスを確認する！

<body class="page page-id-83
page-template page-template-
no-sidebar-php logged-in
admin-bar no-customize-support
single-author">
選択したテンプレート名がクラスに追加される

body.page-template-no-sidebar-php
#primary{
width: 100%;
}
CSSにこの様に書けばOK
注意：作成されたhtmlによって設定が異なる場合があります。

コメントの一括非表示
其の３

こんな経験ありませんか？

固定ページ全部作成した後にページを確認し
たら・・・

全ページにコメント欄
が・・・・

こんな時どうしてますか？

こんな事してないですか？

これだと１つ１つOFFにしていく必要があ
る

そんな事しなくても一括で出来ますよ

「一括操作」を使おう！

でも、「一括操作」が適用されるのは
表示されているページのみ

デフォルトでは２０件

２１件以上のデータを一括で操作したい場合

メニューの画像化+新しいウィンドウで表示
其の４

メニューの画像化というと・・・

グローバルメニューくらいは目立つ
カッコイイボタンにしたい！

メニューの直書き・・・

カスタムメニューを使わずに
メニューのリストタグを直書き

直書きしてしまうと・・・

メニューをページごとにカレント表示する
のが小難しくなる・・・

カスタムメニューを使いましょう！

カスタムメニューの設定の仕方は
割愛させて頂きますm(__)m

カスタムメニュー設定済み

これだけの設定だとテキストリンクのメニューに
なってしまいます。

同じ要領で全部にclassを設定する

<ul id="menu-global_navi" class="nav-menu">
<li id="menu-item-16" class="news menu-item menu-item-type-
post_type menu-item-object-page menu-item-16"><a href="http://
localhost/bar/?page_id=2">NEWS</a></li>
<li id="menu-item-94" class="discography menu-item menu-item-
type-post_type menu-item-object-page menu-item-94"><a
href="http://localhost/bar/?page_id=83">DISCOGRAPHY</a></li>
<li id="menu-item-93" class="biography menu-item menu-item-type-
localhost/bar/?page_id=85">BIOGRAPHY</a></li>

<li id="menu-item-94" class="discography menu-item menu-
item-type-post_type menu-item-object-page menu-item-94"><a
<li id="menu-item-93" class="biography menu-item menu-
href="http://localhost/bar/?page_id=85">BIOGRAPHY</a></li>

<li id="menu-item-94" class="discography menu-item menu-
<li id="menu-item-93" class="biography menu-item menu-
href="http://localhost/bar/?page_id=85">BIOGRAPHY</a></li>
カスタムメニューで設定したクラス名がliのクラスに
設定されます。

liに付与されたclass名を元に
background-imageで背景画像を
設定すればOK

メニューをページごとにカレント表示するに
は

<ul id="menu-global_navi" class="nav-menu"><li id="menu-item-16"
class="news menu-item menu-item-type-post_type menu-item-
object-page menu-item-16"><a href="http://localhost/bar/?
page_id=2">NEWS</a></li>
type-post_type menu-item-object-page current-menu-item
page_item page-item-83 current_page_item menu-item-94"><a
localhost/bar/?page_id=85">BIOGRAPHY</a></li>

<ul id="menu-global_navi" class="nav-menu"><li id="menu-item-16"
class="news menu-item menu-item-type-post_type menu-item-
object-page menu-item-16"><a href="http://localhost/bar/?
page_id=2">NEWS</a></li>
type-post_type menu-item-object-page current-menu-item
page_item page-item-83 current_page_item menu-item-94"><a
href="http://localhost/bar/?page_id=83">DISCOGRAPHY</a></
li>

current-menu-itemを元に背景画像を
変更してあげればOK

メニューのリンクを新しいウィンドウで
表示するには

この設定だけでOKです！

余談：先ほどの設定でメニューの画像化は出
来るのですが・・・

実際プラグインを使った方が
もっと簡単に出来ます・・・(-_-;)

サムネイル・中・大画像サイズ変更
其の５

１ファイルアップするとサムネイル・中・大と
画像を生成してくれる。

フルサイズと合わせると４つのファイルサイズを選択し
記事に投稿することが出来ます。

サムネイル・中・大の画像サイズは
任意のサイズに変更が可能

メディア設定で画像サイズの変更する

メインコンテンツエリアの横幅に応じて
各画像サイズを決めると良いです

注意：
画像をアップロードしたタイミングで
サムネイル・中・大画像が生成されます。

なので、アップロード後にサイズ変更を
しても反映されません。

アップロー後のファイルのリサイズを
したい場合はこちらのプラグインを。

アップロード画像の編集
其の６

大きい画像を小さくしたり・・・

反対向いちゃってたりするのを戻したり・・・

左右反転させたり・・・

トリミングをしたり・・・

というような、画像編集が出来ます。

記事・ページの分割
其の７

同じ記事でページを分割する

Macの場合
option+shift+p
Windowsの場合
alt+shift+p

注意：テンプレートに
<?php wp_link_pages(); ?>
が記載されている必要がる

日付けのフォーマットの変更
其の８

日付けの形式の変更を依頼がきたら・・・
2013年６月15日→2013/0６/15

焦らなくていいです。
テンプレートファイルを触らなくても
管理画面で出来ます！

曜日も簡単に出せます！

Y/m/d (l)
って書きます。
（）←の中は小文字のエルです。

Y/m/d (D)
って書きます。

さくっと引用記事作成
其の９

皆さんは、記事の引用の手順って
どうされてますか？

タイトルコピーして、
自分のブログにペースト

文章をコピーして
自分のブログに引用文としてペースト

って、手間なことしてませんか？

実はこの作業、１クリックで出来ます。

「Press This」を使おう！

あとは気に行った記事で「Press This」を
クリックするだけ！

引用したい文書は事前に
選択しておきましょう

実はテキストだけじゃなく、画像・動画も
簡単に引用出来ます。

WordPress 周年おめでと∼！
其の 10
10

ご清聴ありがとうございました
tkc49

パーフェクトダッシュボード

Recommended

Recommended

More Related Content

Similar to パーフェクトダッシュボード

Similar to パーフェクトダッシュボード (20)

More from Takashi Hosoya

More from Takashi Hosoya (12)

パーフェクトダッシュボード