カテゴリー: 未分類

投稿ページの見出しデザイン-WordPress Twenty Elevenカスタマイズ

何度も言いますが、twentyelevenはよく出来たレスポンシブテーマです。しかし、あまりにモノトーンです。今回は、個別記事中の見出し（h2,h3）に色をつけてみます。 (さらに…)

2012年7月11日
side barのlistをカラフルに-WordPress Twenty Elevenカスタマイズ

レスポンシブデザインでとてもよく出来ているのにモノトーン過ぎるtwentyeleven。今回は、サイドバーにあるカテゴリリストを少しだけカラフルで見やすいものにしてみました。 (さらに…)

2012年7月10日
コピペで出来る！WordPress Twenty Twentyの子テーマ作成
ワードプレスには子テーマというシステムがあります。

テーマをカスタマイズするときにとても便利なものです。

…と言うより、子テーマを使わないと、カスタマイズは難しいです。

子テーマを使わないと、テーマアップデート時に大惨事になります

ワードプレスのテーマは、意外とアップデート頻度が高いです。

Twenty Twenty など、WordPress デフォルトテーマは、アップデートの頻度が高いです。

アップデートの頻度が高いことは、本来は喜ばしいことです。

常にテーマが改善されている、ということですからね。

しかし、テーマファイルを直接編集している場合、アップデートが来ると困ります。

テーマファイルを直接カスタマイズすると、アップデート時に、今までのカスタマイズが水泡に帰してしまいます。

テーマファイルを直接改変するようなカスタマイズをするなら、子テーマを作ってカスタマイズするようにしましょう。

子テーマ作りの準備

子テーマを作る！！と考えている人には馬耳東風かも知れませんが。

子テーマを作る作業には、FTPソフトが欠かせません。

次のようなFTPソフトを導入しておいて下さい。
- FFFTPの設定
- FileZilla
以下、FTPソフトを使ってアップロードするくらいは朝飯前だという皆様向けに説明いたします。

子テーマを作る

子テーマの作り方は、子テーマ – WordPress Codex 日本語版に詳しく書かれています。

私もこれを見て子テーマを作りました。しかし、詳しすぎてわかりにくいとはこの事かも知れません。結構、苦労しました。

Twenty Twenty をこれからカスタマイズする方のために、先輩としてなるべく分かりやすく説明します。

子テーマフォルダを作る

まずは、wp-content/themes/直下に子テーマのフォルダを作ります。テーマフォルダー名は何でもいいです。

テーマフォルダーには、取り敢えずは、次の2つのファイルのみを作ります。
- style.css
- functions.php
それぞれのファイルに書き込む内容は次のとおりです。

style.css

子テーマのstyle.css には、次の4行を書けば十分です。
```
/*
Template:（親テーマ名）
Theme Name:（子テーマ名）
*/
```
WordPressの公式テーマ Twenty Twenty の子テーマとして child-01を作るとすれば次のように書きます。
```
/*
Template: Twenty Twenty 
Theme Name: child-01
*/
```
functions.php

functions.php は、次のように書いて下さい。
```
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
   wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
```
ファイルの最後がPHPで終了するので、閉じタグ?>は省略します。

と言うより、省略しないと、不具合のもとを自分で作り出す感じになります。

このことは、以下などに詳しく書かれています。
- PHPの最後の終了タグ ?> は付けないでおこうねというお話 | ザ・サイベース
子テーマフォルダをサーバーにアップロード

子テーマ内に style.css・functions.php を作ったら、 FTPソフトで /wp-content/themes の直下に子テーマフォルダごとアップロードしましょう。

次に、WordPress管理画面→外観→テーマで、子テーマを有効化します。

カスタマイズの考え方

子テーマを作って有効化したら、いよいよカスタマイズに着手します。

カスタマイズは全て、子テーマフォルダ内のファイルを編集して行います。

style.css・functions.php のカスタマイズ

子テーマのstyle.css・functions.php は、親テーマのstyle.css・functions.php 末尾に付加されます。

それを前提として、子テーマのstyle.css・functions.php を、適宜編集しましょう。

その他のファイルのカスタマイズ

style.css・functions.php 以外のファイルは、子テーマ内に親テーマと同名のファイルがあれば、子テーマのファイルが親テーマのファイルを上書きします。

style.css・functions.php 以外でカスタマイズしたいファイルがあるなら、まず、それをコピーして子テーマフォルダ内に貼り付けましょう。

そして、子テーマ内のファイルを、適宜変更してカスタマイズします。

カスタマイズ準備完了！！

これでカスタマイズ準備完了です。

少しずつカスタマイズしていこうと思います。
2012年7月9日
投稿title見出しをオシャレに-WordPress Twenty Elevenカスタマイズ
ワードプレスのデフォルトテーマtwentyelevenは、レスポンシブデザインでとてもよく出来たテーマです。ただ、そのままではあまりにモノトーンです。ちょっと見出しに色を付けて、オリジナル色を出してみました。

style.cssでスタイルを決めている場所の特定

まず、style.cssで見出しのスタイルを決めている部分を特定しないといけません。

ソースを見ると、投稿タイトルを決めている見出しには漏れなく「entry-title」というクラスが宛てられています。これに注目してstyle.cssをいじります。

具体的には、以下の場所をいじるとかなりカラフルに変えられます。
```
.entry-title,
.entry-header .entry-meta {
/****** padding-right: 76px;*********/
}
.entry-title {
    clear: both;
    color: #222;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5em;
    padding-bottom: .3em;
    padding-top: 15px;
}
```
ウェブシュフ好みのアレンジ

まずは、私好みのアレンジから。boxのborderに幅と色をつけただけですが、これだけでかなりメリハリがつきます。（ウェブシュフはそう思っています。）

これで、このページの冒頭の画像のような投稿タイトルの表示が出来ます。
```
.entry-title,
.entry-header .entry-meta {
/****** padding-right: 76px;*********/
}
.entry-title {
    clear: both;
    color: #222;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5em;
    padding:0 0 0.3em 10px;
    border-color:deeppink;
    border-style:solid;
    border-width:0 0 2px 15px;
}
```
そのほかボーダーをいじるパターン

このように変えると、
```
.entry-title,
.entry-header .entry-meta {
/****** padding-right: 76px;*********/
}
.entry-title {
    clear: both;
    color: #222;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5em;
    padding:0 0 0 10px;
    margin:0 0 3px 0;
    border-color:deeppink;
    border-style:solid;
    border-width:0 0 0px 15px;
}
```
こんな表示になります。

CSSを勉強すれば、見出しの背景をグラデーションにしたり、色んな見出しが作れます。

興味がある方は勉強してチャレンジするのもいいかもしれません。
2012年7月6日
あなたの記事は読まれてますか!!人を惹きつけるタイトルに必要な4要素
無名なブロガーが記事を読んでもらうためには、キャッチーな記事タイトルを一人でも多くの人に見てもらう必要があります。記事を読んでもらえるかどうかはタイトルにかかっているのです。そこで、人を引きつけるタイトルに必要な要素をまとめました。

自分のための記事だという適合性

ブログを読むとき、手当たり次第に読もうとしている人はあまりいません。

自分に関係なさそうな記事や、自分の知らない言葉が出てくる記事はスルーしがちです。

少なくとも自分に関係ありそう・役に立ちそうだから貴重な時間を割いてその記事を読むのです。

そこで、自分に関係ありそう・役に立ちそうな感じを出すために、タイトルには以下の形式を取り入れます。

専門用語・ブランド名・製品名は使わない

これは必須条件です。知らない言葉が短いタイトルに出るようだと自分に関係ない記事と判断されてしまいます。

「あなたは～」「みんな～」「私たち～」と呼びかけてみる

これは出来れば取り入れたい要素です。自分を含む集団に対して呼びかけがあると、人は一瞬注意を惹かれます。「あなたは～」の場合「～ですか」と質問の形にするとなお効果的です。
- 「あなたは今の成績に満足?成績が上がる7つの工夫」
- 「成績が上がる7つの工夫」
この二つを比べてみると実感できるのではないでしょうか。

流行のキーワードを入れる

これも出来れば取り入れたいです。しかし、記事内容と相反する言葉は入れてはいけません。たとえば、とても大雑把な勉強法を提示するとき、
- 「成績が上がるとてもワイルドな勉強法」
というのは、アリのような気がします。

利益や動機を提示する内容

人が貴重な時間を割いて記事を読むのは、そこに何かのメリットを求めているからです。求められているメリットとはほとんどの場合ノウハウやモチベーションです。

記事を読むことによる利益をはっきり提示することで、より強い注意を引きつけることができるようになります。

「絶対に多くの人に読んでもらいたい」という記事には、以下のどれか1つは取り入れたいものです。

楽な方法

これは、「直ぐに○○できる方法」という形式です。何か困った問題が起きてネットで調べ物をするときは、こういう情報を探しますよね。
- 「直ぐに成績が上がる方法」
というタイトルを、悩み多き受験生が見たら、とりあえず記事まで飛んできてくれるんじゃないでしょうか。

優秀な方法
- 「オール5を取るための方法」
など、何かとてもレベルの高いところに到達させてくれそうな情報も、多くの人に望まれている情報です。

動機付け

これは、上の二つの項目でも満たされています。挫折しかかっているとき、何かをするための方法とか、そうしなければならない理由のようなものが提示されると、それらをモチベーションにしてもう一頑張りする力が沸いてきます。

これを利用して、記事タイトルを「～方法」「～理由」の形式で締めると、それだけでかなりキャッチーになります。
- 「成績を上げなければならない10の理由」
など、成績があがることによるメリットが具体的に書かれていれば、勉強するモチベーションが上がります。

実際、ノウハウ本とか自己啓発本（動機付け本）は、本のジャンルの中でも常に売れ筋ですよね。

秘密の暴露

秘密を覗きたいという欲望は誰にでもあるものです。それが、何かをするノウハウやモチベーションと結びつくとかなり強い関心を持ってもらえます。

かなりオリジナル色の濃いノウハウ記事には「～秘密の方法」「～マル秘マニュアル」等というタイトルをつけると効果的です。

簡単で分かりやすい表現

タイトルに知らない言葉が含まれていないことは、関心をひきつけるためにとても大事なことです。でも、引きつけた関心をさらに増幅するために、メリットがより分かりやすい言い回しが必要です。

虚偽にならない程度の誇張

これはもう定番ですね。
- 「成績を劇的に上昇させる方法」
- 「成績を上昇させる方法」
明らかに前者が魅力的です。「劇的」と「少し」とを区別する明確な基準はないので、書き手の主観で少々大げさに書いても問題はありません。

カタカナの擬態語

カタカナの擬態語も有効です。

先ほどの成績の例で言うと、
- 「成績をアッという間に上昇させる方法」
- 「成績がグングン上がる方法」
- 「成績がドカーンと上がる方法」
などが考えられます。

数字の利用

方法や理由を述べるときに「○個の方法」のような形で数字を使うと、論点数がはっきり提示されているため、読みやすい記事を連想しやすいです。

また、記事を読むことによるメリットをより客観的に表し、タイトルだけで記事内容にある程度の信頼性を持たせることが出来ます。
- 「成績をアッという間に上昇させる方法」
- 「3から5へ!成績をアッという間に上昇させる7つの方法」
この二つでは、下のほうが信用できて読みやすそうですよね。

記事を読み直しながら的確なタイトルをつける

記事タイトルが記事の内容とずれていると、せっかく記事を読みに来てくれた人も直ぐに離脱してしまいます。

タイトルで関心を引こうとするあまり、記事の内容とずれたタイトルをつけてしまわないように、十分注意しましょう。
2012年7月2日
トップページから余計なリンクを全て削除～WordPress Twenty Elevenカスタマイズ

ワードプレスのデフォルトテーマtwentyelevenのトップページには、各記事ページのコメントフォームへのリンクがあります。ウェブシュフとしては、このコメントフォームへのリンクは余計です。撤去することにしました。 (さらに…)

2012年7月1日
メニューバーをアイコン表示に～WordPress Twenty Eleven改造
以前、管理バーを常時表示させてメニューバーに転用する改造作業を行いました。ところが、各項目の幅が文字数によって決まるためタップしにくい項目があるので、スマホでは使いにくいです。

そこで、メニューの各項目を、40×40の正方形で表示するべく頑張ってみました。

ページ上部に高さ40pxの空白を作る

メニュー項目を1辺40pxの正方形にするということは、メニューバーの幅も40pxということです。そこで、function.phpに以下を追加します。
```
function mytheme_admin_bar_callback() {
    echo '<style type="text/css">
    html { margin-top: 40px !important; }
    * html body { margin-top: 40px !important; }
    </style>';
}
add_action( 'wp_head', 'mytheme_admin_bar_callback' );
```
各メニュー項目を40×40サイズに設定

以前の記事でも、メニューバーにメニュー項目を登録しました。

今回はそのときのfunction.phpへの書き込みを少しアレンジして、’title’に40×40の画像やCSSで40×40に整形した文字列などを入れます。具体的には次のようにしました。
```
function mytheme_add_about_and_login( $wp_admin_bar ) {
    $wp_admin_bar->add_node(array(
    'id' => 'HOME',
    'title' => '<img style="width:40px;" src="https://webshufu.com/top/wp-content/uploads/2012/04/e11754b14653955f5bd853089f01fb2c.jpg" alt="ウェブシュフ" />',
    'href' => home_url('/'),
    'meta' => array('class' => 'admin_bar_home')
    ));

    $wp_admin_bar->add_node( array(
    'title' => 'Menu',
    'href' => '#categories-2',
    'meta' => array('class' => 'admin_bar_menu')
    ));
    $wp_admin_bar->add_node(array(
    'id' => 'pagetop',
    'title' => '<div style="height:20px;
    color:white;
    background:purple;
    font:bold 16px/20px sans-serif;">Page</div><div style="height:20px;
    color:white;
    background:purple;
    font:bold 16px/20px sans-serif;">TOP</div>',
    'href' => '#',
    'meta' => array('class' => 'admin_bar_pagetop'),
    ));

}
add_action( 'admin_bar_menu', 'mytheme_add_about_and_login', 1000 );
```
管理バーのスタイルを変える

今作っているのはメニューバーですが、もともと管理バーだったものを転用しています。

そのため、スタイルは管理バーと同じくwp-includes/css/admin-bar.cssがあてられています。

これを直接いじると、管理画面の見た目が崩れる恐れがある上、wordpressのアップデート時に上書きされて、コツコツ頑張ってきたカスタマイズが水泡に帰す恐れがあります。

専用.css作成

そこで、メニューバー専用の.cssファイルを新たに作ります。

まず、wp-includes/css/admin-bar.cssをコピーして、今いじっているテーマファイル内に貼り付けます。

たとえば、twentyelevenを直接いじっているならwp-content/theme/twentyeleven/内に、hogehogeという子テーマフォルダーを作っていじっているならwp-content/theme/hogehoge/内に貼り付けます。

次に、header.phpの</head>の直前に以下のコードを挿入します。
```
<link rel="stylesheet" 
type="text/css" 
media="all" 
href="<?php bloginfo( 'wpurl' ); ?>/wp-content/themes/(twebtyelevenまたは子テーマフォルダー)/admin-bar.css" />
```
これで、メニューバー専用のcssファイルが出来ました。

28px→40px

次に内容を書き換えていきます。もともとの管理バーは高さ28pxなので、これを40pxに変えます。

テキストエディタの検索機能などを使って、admin-bar.cssで「28px」となっている部分を全て「40px」に書き換えてください。

メニュー項目のpadding調節

項目同士のpaddingは、admin-bar.css内の以下の部分で12pxに設定されています。
```
#wpadminbar .quicklinks a,
#wpadminbar .quicklinks .ab-empty-item,
#wpadminbar .shortlink-input{
height:40px;display:block;
padding:0 12px;margin:0
}
```
12pxだと隙間が開きすぎるので、好みの数値に変えます。

私はスマホで標準的な幅320pxの画面でメニュー項目が最大7つ並ぶように12pxを2.5pxに変えました。

0にすると、幅320pxの画面でメニューが8つ隙間なくぎっしりと並びます。

メニュー項目のpadding調節

最後に、メニューバーの全項目の文字を大きくして太くします。admin-bar.cssに2箇所ほど、以下の記述があります。
```
font:normal 13px/40px sans-serif;
```
これを下のように変えます。
```
font:bold 16px/40px sans-serif;
```
以上で、完成したつもりですが、画像を使った項目は見た目があまり美しくないので、CSSで整形した文字列で行こうと思います。

追伸

その後こんな感じに変えたりもしました。
2012年6月30日

個別記事ページの上部のリンクを外す-WordPress Twenty Elevenn改造

ワードプレスのデフォルトテーマtwentyelevenでは、個別記事ページのタイトルの上に、何かしら余計なリンクが並んでしまいます。赤で囲んだ3箇所のリンクを全て取り除いていきます。

前後の記事へのリンクを外す

コレをはずすのが一番簡単でした。single.phpで以下の部分を探します。

<nav id="nav-single">
    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
    <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&amp;larr;</span> Previous', 'twentyeleven' ) ); ?></span>
    <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&amp;rarr;</span>', 'twentyeleven' ) ); ?></span>
</nav><!-- #nav-single -->

これを、全てコメントアウトするだけです。

<!-- <nav id="nav-single">
    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
    <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&amp;larr;</span> Previous', 'twentyeleven' ) ); ?></span>
    <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&amp;rarr;</span>', 'twentyeleven' ) ); ?></span>
</nav>#nav-single -->

とても簡単です。

日付のリンクを外す

まず、content-single.phpで以下の部分を探します。

<div class="entry-meta">
    <?php twentyeleven_posted_on(); ?>
</div><!-- .entry-meta -->

これを以下のように書き換えます。（コメントアウトです。）

<!-- <div class="entry-meta">
    <?php twentyeleven_posted_on(); ?>
</div>.entry-meta -->

編集画面へのリンク

まず、content-single.phpで以下の部分を探します。

<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

例によってコレもコメントアウトします。

<?php /******* edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' );*******/ ?>

不自然な余白除去

これでタイトル上部のリンクはなくなりましたが、そこに不自然な空白が出来てしまいました。これを何とかします。

style.cssで以下のような部分を探します。

/* Singular content styles for Posts and Pages */
.singular .hentry {
    border-bottom: none;
    padding: 4.875em 0 0;
    position: relative;
}
.singular.page .hentry {
    padding: 3.5em 0 0;
}

これを以下のように書き換えます。

.singular .hentry {
    border-bottom: none;
    padding: 0;
    position: relative;
}
.singular.page .hentry {
    padding: 0;
}

すると

空白はだいぶ少なくなりました。

2012年6月29日

wordpressで管理バーから常時表示メニューバーを作る方法

ワードプレスでは、デフォルトのtwentyelevenをはじめとするほとんどのテーマで、ログインしてる状態では常にAdmin barが表示されます（上図）。これを改造して、どんなに下にスクロールしても常に表示されるナビゲーションメニューバーに早変わりさせることが出来ます（下図）。
(さらに…)

2012年6月27日
検索窓の位置を変える-ワードプレスtwentyelevenカスタマイズ

twentyelevenをカスタマイズしていたら、ヘッダの右側にある検索窓の位置に不都合が生じました。style.cssをいじって検索窓の位置を調節したのでメモ。 (さらに…)

2012年6月27日

カテゴリー: 未分類

子テーマを使わないと、テーマアップデート時に大惨事になります

子テーマ作りの準備

子テーマを作る

子テーマフォルダを作る

style.css

functions.php

子テーマフォルダをサーバーにアップロード

カスタマイズの考え方

style.css・functions.php のカスタマイズ

その他のファイルのカスタマイズ

カスタマイズ準備完了！！

style.cssでスタイルを決めている場所の特定

ウェブシュフ好みのアレンジ

そのほかボーダーをいじるパターン

自分のための記事だという適合性

専門用語・ブランド名・製品名は使わない

「あなたは～」「みんな～」「私たち～」と呼びかけてみる

流行のキーワードを入れる

利益や動機を提示する内容

楽な方法

優秀な方法

動機付け

秘密の暴露

簡単で分かりやすい表現

虚偽にならない程度の誇張

カタカナの擬態語

数字の利用

記事を読み直しながら的確なタイトルをつける

ページ上部に高さ40pxの空白を作る

各メニュー項目を40×40サイズに設定

管理バーのスタイルを変える

専用.css作成

28px→40px

メニュー項目のpadding調節

メニュー項目のpadding調節

追伸

前後の記事へのリンクを外す

日付のリンクを外す

編集画面へのリンク

不自然な余白除去