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

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

WordCamp Kobe 20132013/6/15細谷　崇（@tkc49）

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

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

西宮・箕面・富田林

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

と、思いきや・・・

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

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

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

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

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

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

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

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

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

①まず固定ページを作成

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

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

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

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

ロゴグローバルメニュー

スライダー

お知らせ

バナー

バナー

バナー


記事タイトルアイキャッチカテゴリー

アーカイブ

月別アーカイブ

カレンダー

記事抜粋

アイキャッチ

アイキャッチ

アイキャッチ

アイキャッチ

記事タイトル

記事抜粋

記事タイトル

記事抜粋

記事タイトル

記事抜粋

記事タイトル

記事抜粋


スライダー

お知らせ

バナー

バナー

バナー



アーカイブ


カレンダー

記事抜粋

アイキャッチ

アイキャッチ

アイキャッチ

アイキャッチ

記事タイトル

記事抜粋

記事タイトル

記事抜粋

記事タイトル

記事抜粋

記事タイトル

記事抜粋

トップページブログトップ

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

かつ

<?php body_class(); ?>


スライダー

お知らせ

バナー

バナー

バナー



アーカイブ


カレンダー

記事抜粋

アイキャッチ

アイキャッチ

アイキャッチ

アイキャッチ

記事タイトル

記事抜粋

記事タイトル

記事抜粋

記事タイトル

記事抜粋

記事タイトル

記事抜粋

<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）

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

例えばこんな感じです。

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

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

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


sidebar.phpに分岐処理

sidebar.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 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にしていく必要がある

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

「一括操作」を使おう！

これだけでOK！

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

デフォルトでは２０件

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

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

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

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


メニューの直書き・・・

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

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

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

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

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

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

メニューの名前

リンクのtitle属性

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

画像化するには！

同じ要領で全部に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-post_type menu-item-object-page menu-item-93"><a href="http://localhost/bar/?page_id=85">BIOGRAPHY</a></li>

<li id="menu-item-64" class="goods menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a href="http://localhost/bar/?page_id=2">GOODS</a></li>

<li id="menu-item-90" class="blog menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://localhost/bar/?page_id=80">ブログ</a></li>

</ul></div>

http://localhost/bar/?page_id=2















</ul></div>
















</ul></div>














</ul></div>

カスタムメニューで設定したクラス名がliのクラスに設定されます。





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

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


<li id="menu-item-94" class="discography menu-item menu-item-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>




</ul>












<li id="menu-item-94" class="discography menu-item menu-item-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>




</ul>










<li id="menu-item-94" class="discography menu-item menu-item-

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>




</ul>







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)って書きます。

（）←の中は小文字のエルです。

2013/06/14（金曜日）

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

2013/06/14（金）

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

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

こんな感じ？

良記事発見！

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

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

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

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

「Press This」を使おう！

ドラッグ＆ドロップ

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

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

これで引用完了！

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

デモします。

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

10

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

tkc49

Documents

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