サクラのサーバでワードプレス（３）
タスク
- wordpressの構造理解とカスタマイズ
サブタスクに分割
まずタスクを次のように分割しました。
- 参考文献（http://kachibito.net/wordpress/theme-customizing-1st-step.html）を読む
- 自分なりに構造をまとめる
- wordpressのカスタマイズファイルを知る
- wordpressをカスタマイズする
- htmlとcssを必要なところだけ勉強←これは実装中に必要なところだけ調べればいい
前回分けてみたらどこまで進んでいるかなど分かりやすかったので
これからも分けて行きます。
文献を参考に手を動かしながらwordpressのテンプレートの構造を勉強しました。
今ある環境を壊すと恐いのでMAMPでローカル環境を作っていじってみました。
wordpressの構造は結構シンプルみたいです。
て最初のページが作られています。
ページに必要なページを読み込むような感じです。
読み込みの関数は
<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_template_part();?>カスタマイズテンプレート
という感じです。
実際に
/wordpress/wp-content/themes/twentyfourteen
にアクセスしてどういうファイルが入ってるかなどを見てみました。
最初の画面がどのように作られているのかを実際に知りたくて
index.phpの中身をいじります。
header.phpを消してやると急にページが貧相になってしまいました。
header.php内にタイトルがあったので色々打ち込んでみるとサイトのタイトルに
反映されます。
一方index.phpに文字を打ち込んでみても反映されまん。
<div·id="primary"·class="content-area”>
の内側に書いてやるとうまく反映されました。
記事を単一で表示するためのsingle.phpの中身もみて行きました。
get_template_part(‘content’, ‘page’);
を使ってcontent_page.phpの内容を取ってきて
whileloopで表示させているみたいでした。
content_page.phpの中でthe_titleやthe_contentという
関数を使いページの内容を取得しているみたいである。
参考文献の例に習ってsingle.phpのコードを変更してみました。
<?php
$post=$wp_query->post;
if·(·in_category('1'))·{
include(TEMPLATEPATH.'/single01.php');
}·elseif·(in_category('2'))·{
include(TEMPLATEPATH.'/single02.php');
}·elseif·(in_category('3'))·{
include(TEMPLATEPATH.'/single03.php');
}·elseif·(in_category(‘4'))·{
include(TEMPLATEPATH.'/page.php');
}·else·{
include(TEMPLATEPATH.'/single-others.php');
}
?>
カテゴリーのIDごとにリンク先を変更する事が出来ます。
このやり方を使えばページごとにデザインを変える事も出来そうです。
自分なりに構造をまとめる
核となるページは
これに対して
を組み合わせて行きます。
さらに核となるページやヘッダーなどの中身を書き換えてやる事で
リンク先のページなどをカテゴリーなどの属性ごとに書き換えてやる事も出来ます。
テンプレートの構造に関してボンヤリとつかめたので
次は実際にカスタマイズをしながら構造がどうなっているか勉強して行きます。
wordpressのカスタマイズファイルを知る
カスタマイズファイルがあるのでは無く上記のファイルを書き換えて行く事が
wordpressのカスタマイズをするという事であると思います。
wordpressをカスタマイズする
これだけではタスクが大きすぎると感じたので小さいタスクに分けました。
- 何がカスタマイズできるのかを調査する
- 実際にカスタマイズしたい事を考える
- カスタマイズをどのような方法で実装するのかを考える（あるいは調べる）
- カスタマイズを実装してみる
何がカスタマイズできるのかを調査する
まずオリジナルのテーマを追加したいのでtwentyfourteenをそのままcustumという 名前にコピーし作業用のテーマを作成しました。
管理画面を見ると
Twenty Fourteen/custum
という名前で作業用のテーマが出来ていました。
調べてみるとwordpressカスタマイズのためのTIPsのリンク集が見つかりました。
ここに沢山wordpressのカスタマイズのコードが落ちているらしいので
探りを入れてみました。
ソーシャルボタンを付けたり、ファビコンを表示したり
記事によって独自のCSSを使ったりも出来る模様。
特に気になったのは記事ごとの独自のCSSです。
これを応用してやる事でブログに接続する端末によって
表示を最適化してやる事が出来そうです。
になっていました。)
実際にカスタマイズしたい事を考える
実装してみたいものをピックアップしてみました。
という事で、今日実装するのは抜粋表示に決定！
ここに抜粋方法が載っていると思ったら違いました。
抜粋には
the_excerpt
を使うみたいだという事だけ分かりました。
さらにcordedでthe_excerptの使い方を調べてみると
the_excerpt();
と書く事で抜粋の文字列を表示してくれるらしいです。
カスタマイズを実装してみる
そして実際に書いてみたコードは次のような内容です。
print('<div align="center">');
print('<font color="blue"><b>');
echo the_title();
print('</b></font>');
print('</div>');
print('<div align="center">');
the_excerpt();
print('</div>');
print('<div align="center"> <a href="');
echo get_permalink();
print('"> 全文を読む</a></div>');
print('<br />');
print('<br />');
print('<br />');
しかし抜粋の最後に[…]とついてしまいます。。。
最初に書いたサイトにfunction.phpに次のコードを追加すればいいらしいです。
function new_excerpt_more($more) {
return ‘ ‘;
}
add_filter(‘excerpt_more’, ‘new_excerpt_more’);
恐らくexcerpt_moreという関数をthe_excerptが使っていて、
new_excerpt_moreがexcerpt_moreの返り値を受け取って代わりに
the_excerptに渡すようにしているのだと思います。
function.php自体にはthe_excerptが無かったので後で調べてみる必要ありです。
また、記事の抜粋が横幅一杯に広がってしまう問題が残りました。
これもなんとかしたいです。
残った課題
雑用的にした事•調べた事
ユーザーエージェント
webサイトへのアクセスの際に使用されるプログラムのこと。
pcだけではなくスマホなどのモバイル端末からのアクセスなど
それぞれの端末に対して動的にユーザがみやすいデザインにしてやる必要がある。
CMS（Contents Management System）
webコンテンツを構成するテキストや画像、レイアウト情報などを
一元的に保存•管理し、サイトを構築したり編集したりするソフトウェアの事。
wordpressのテーマの編集方法
テーマファイル群を最初はTerminalからssh接続で行っていましたが、
管理画面から出来る事を発見しました。
今後は特別な編集（ファイルの削除とか、追加とか）以外はブラウザ上で
行っていくと思います。見やすいので。
感想
今日もwordpressと格闘の日々でした。
wordpressの構造がおぼろげながら見えてきました。
見た目や機能のカスタマイズはテーマによって実装できるみたいです。
抜粋表示を実装してみましたが中々大変でcordexを見たり、
先達のサイトを参考にしたりしてなんとか機能だけは実装できたと思います。
次はfacebookのいいねボタンを付けてみたいです。
