Mais conteúdo relacionado
Semelhante a WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック (20)
Mais de Takashi Uemura (20)
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
- 6. wordpress
>
wp-‐content
>
themes
>
twentyfourteen
!
にあります。
!
Twenty Thirteen, Twenty Twelveも
同じ場所にあります。
!
新しいテーマを作る場合も、themesディレクト
リの下にディレクトリを作成することになってい
ます。
!
今回はTwentyFourteenをディレクトリごとコピー
して別のテーマ名をつけてから改造します。
テーマ用のファイルってどこにあるの?
- 13. サイドバーの位置を変えるには?
まずサイドバーの位置を変えてみます
.content-‐area
{
width:
100%;
}
!
#secondary
{
background-‐color:
transparent;
float:
left;
}
!
.site-‐content,
.site-‐main
.widecolumn
{
margin-‐left:
222px;
}
.content-‐area
{
width:
70%;
}
!
#secondary
{
background-‐color:
#000;
float:
right;
}
!
.site-‐content,
.site-‐main
.widecolumn
{
margin-‐left:
100px;
}
cssファイルの変更だけで出来ます。style.cssを改造してください。
- 14. <div
id="site-‐header">
<a
href="<?php
echo
esc_url(
home_url(
'/'
)
);
?>"
rel="home">
<img
src="<?php
header_image();
?>">
</a>
</div>
<header
id="masthead"
class="site-‐header"
role="banner">
<div
class="header-‐main">
<h1
class="site-‐title">
<a
href="<?php
echo
esc_url(
home_url(
'/'
)
);
?>"
rel="home">
<?php
bloginfo(
'name'
);
?>
</a>
</h1>
</div>
</header>
色を変えたり、フォントの大きさを変えたりするのもCSSでできます。
ただしサイトタイトルは場所を移動させ
たりしました。
cssで背景色と
フォントを変更
(ヘッダ画像は
管理画面で
追加しました)
header.php
- 20. <?php
get_header();
?>
<div
id="main-‐content"
class="main-‐content">
<?php
if
(
is_front_page()
&&
twentyfourteen_has_featured_posts()
)
{
get_template_part(
'featured-‐content'
);
}
?>
<div
id="primary"
class="content-‐area">
<div
id="content"
class="site-‐content"
role="main">
<?php
if
(
have_posts()
)
:
while
(
have_posts()
)
:
the_post();
get_template_part(
'content',
get_post_format()
);
endwhile;
twentyfourteen_paging_nav();
else
:
get_template_part(
'content',
'none'
);
endif;
?>
</div>
</div>
<?php
get_sidebar(
'content'
);
?>
</div>
<?php
get_sidebar();
get_footer();
index.phpの中身
get_header()などのテンプレートタグの中で
子ファイルを呼び出しています。
どのテンプレートタグがどのファイルを呼び出してい
るか把握しておいた方が良いでしょう。
header.phpを呼び出す
content.phpを呼び出す
sidebar.phpを呼び出す
footer.phpを呼び出す
index.php
- 28. <?php
$args
=
array(
'posts_per_page'
=>
5,
'category_name'
=>
'information',
);
$myposts
=
get_posts(
$args
);
foreach(
$myposts
as
$post
)
:
setup_postdata(
$post
);
?>
<h3>
<a
href="<?php
the_permalink();
?>"><?php
the_title();
?></a>
</h3>
<?php
the_excerpt()
?>
<?php
endforeach;
wp_reset_postdata();
?>
記事データを取ってくることができるテンプレートタグ
get_posts()
記事データを取ってきて$mypostsに入れている
どんな条件の記事を取ってく
るか?を指定している部分。
パラメータと言います。}}
まず、記事を5件取ってくることを考えます。
- 30. <?php
$args
=
array(
'posts_per_page'
=>
5,
'category_name'
=>
'information',
);
$myposts
=
get_posts(
$args
);
foreach(
$myposts
as
$post
)
:
setup_postdata(
$post
);
?>
<h3>
<a
href="<?php
the_permalink();
?>"><?php
the_title();
?></a>
</h3>
<?php
the_excerpt()
?>
<?php
endforeach;
wp_reset_postdata();
?>
get_posts()のパラメータはいろいろ指定できます。
詳しくはCodexの
http://wpdocs.sourceforge.jp/Class_Reference/WP_Query
に、どんなパラメータが指定できるかの情報が載っています。
1ページに表示する件数:5件
カテゴリーのスラッグ名:information
- 31. <?php
$args
=
array(
'posts_per_page'
=>
5,
'category_name'
=>
'information',
);
$myposts
=
get_posts(
$args
);
foreach(
$myposts
as
$post
)
:
setup_postdata(
$post
);
?>
<h3>
<a
href="<?php
the_permalink();
?>"><?php
the_title();
?></a>
</h3>
<?php
the_excerpt()
?>
<?php
endforeach;
wp_reset_postdata();
?>
get_postsでデータを取ってきたあとは、
そのデータを表示します。
記事へのリンクURL
取ってきた5件の記事を繰り返し処理して
1件ずつタイトルと抜粋を表示します。
記事のタイトル
記事の抜粋
さらに:
the_excerpt()は記事本文の先頭55文字を抜粋してくれるけど、長すぎるの
でもっと短くしたい。どうすればいいの?
- 32. function
custom_excerpt_length(
$length
)
{
return
40;
}
add_filter(
'excerpt_length',
'custom_excerpt_length',
999
);
the_excerpt()は記事の抜粋を表示するテンプレートタグ
ですが、抜粋する文章の長さを変えることができます。
詳しくは以下参照
http://wpdocs.sourceforge.jp/テンプレートタグ/the_excerpt
デフォルトでは、抜粋の長さは55文字ですが、40文
字に変更しています。
テーマファイルの下にある
- 33. 作ったコードをfront-page.phpに組み込みます
<div
class="informationarea">
<h2>お知らせ</h2>
<img
src="<?php
echo
get_template_directory_uri();
?>/images/information.jpg"
/>
<div
class="titlelist">
<?php
$args
=
array(
'posts_per_page'
=>
5,
'category_name'
=>
'information',
);
$myposts
=
get_posts(
$args
);
foreach(
$myposts
as
$post
)
:
setup_postdata(
$post
);
?>
<h3>
<a
href="<?php
the_permalink();
?>"><?php
the_title();
?></a>
</h3>
<?php
the_excerpt()
?>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
</div>
<div
class="recentblogarea">
<h2>最近の投稿</h2>
<div
class="titlelist">
<?php
$args
=
array(
'posts_per_page'
=>
5,
'category_name'
=>
'blog',
);
$myposts
=
get_posts(
$args
);
foreach(
$myposts
as
$post
)
:
setup_postdata(
$post
);
?>
<h3>
<a
href="<?php
the_permalink();
?>"><?php
the_title();
?></a>
</h3>
<?php
the_excerpt()
?>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
<img
src="<?php
echo
get_template_directory_uri();
?>/images/recentblog.jpg"
/>
</div>
</div>
「お知らせ」最新5件表示
「最近の投稿」5件表示
- 38. サイドバーとテンプレートタグの対応表
名 前 テンプレートタグ 実体のphpファイル
メインサイドバー get_sidebar() sidebar.php
コンテンツサイドバー get_sidebar('content') sidebar-‐content.php
フッターウィジェットエリア get_sidebar('footer') sidebar-‐footer.php
これ以外にサイドバーの数を増やすことも出来ます。
ただし、get_sidebar('xxxxx') の'xxxxx'とファイルを新しく作っただけでは、
管理画面で使うことはできません。
functions.phpの中で、phpコードを書いてサイドバーの定義を行う必要があります。
(やや高度な知識が必要なため、説明は割愛します)
- 40. さらに:管理画面のウィジェット表示が実態にそぐわなくなったので、
表現を変更してみましょう。
register_sidebar(
array(
'name'
=>
__('Content
Sidebar',
'twentyfourteen'),
'id'
=>
'sidebar-‐2',
'description'
=>
__('Additional
sidebar
that
appears
on
the
right.',
…
'before_widget'
=>
'<aside
id="%1$s"
class="widget
%2$s">',
'after_widget'
=>
'</aside>',
'before_title'
=>
'<h1
class="widget-‐title">',
'after_title'
=>
'</h1>',
)
);
コンテンツサイドバー
の名前や説明は、
functions.php内のregister_sidebar()
で設定しています。
ここを変更すれば管理画面のウィジェット表示が変わります。
名前とか説明の文章が実態に合わない!
- 41. register_sidebar(
array(
'name'
=>
'コンテンツエリア下サイドバー',
'id'
=>
'sidebar-‐2',
'description'
=>
'ドヤ顔サイドバー',
'before_widget'
=>
'<aside
id="%1$s"
class="widget
%2$s">',
'after_widget'
=>
'</aside>',
'before_title'
=>
'<h1
class="widget-‐title">',
'after_title'
=>
'</h1>',
)
);
例えばこのように変えると、
管理画面の表現も変わります。
表記が変わった!
サイドバーは必ずしもサイドに配置する必要はありません。
ウィジェットを簡単に追加削除できる便利な箱として利用しましょう。
- 52. がまん強くソースコードを読む練習
まずターゲットを探します。ターゲットが見つかったら上に遡る!
<h3
id="reply-‐title"
class="comment-‐reply-‐title">
<?php
comment_form_title(
$args['title_reply'],
$args['title_reply_to']
);
?>
<small><?php
cancel_comment_reply_link(
$args['cancel_reply_link']
);
?></small>
</h3>
/**
*
Filter
the
comment
form
default
arguments.
*
Use
'comment_form_default_fields'
to
filter
the
comment
fields.
*
@param
array
$defaults
The
default
comment
form
arguments.
*/
$args
=
wp_parse_args(
$args,
apply_filters(
'comment_form_defaults',
$defaults
)
);
$defaults
=
array(
'fields'
=>
$fields,
'id_form'
=>
'commentform',
'id_submit'
=>
'submit',
'title_reply'
=>
__(
'Leave
a
Reply'
),
'title_reply_to'
=>
__(
'Leave
a
Reply
to
%s'
),
'cancel_reply_link'
=>
__(
'Cancel
reply'
),
'label_submit'
=>
__(
'Post
Comment'
),
'format'
=>
'xhtml',
);
function
comment_form(
$args
=
array(),
$post_id
=
null
)
{
__(
'Leave
a
Reply'
)
が"コメントを残す"の実体。
__()
関数によって、英語が日本語に変換されている。
comment_form関数は$argsを引数にとる。
関数の外から$argsを指定することができる!
ここがターゲット
上へ
$argsが無いときは$default
の設定を使うっぽい(想像)
上へ