WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
•
7 j'aime•10,491 vues
WordPressに標準添付されているテーマや公開されているテーマを使うのも良いですが、WordPressの醍醐味はいろいろカスタマイズできること。世界に一つだけの自分だけのオリジナルサイトを作りたいですよね。またはお仕事でWordPressのサイト制作を任されることもあるかも知れません。 自分好みにカスタマイズしたい、でもどうすればいいか分からない、という方向けに、デフォルトテーマTwentyFourteenからのカスタマイズに必要な知識や事例を紹介します。 ・見た目の色とかフォントサイズの変更 ・トップページだけレイアウトを変えたい ・サイドバーをもっと自在に操る ・コメント欄をカスタマイズするには？
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Similaire à WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック (20)
Plus de Takashi Uemura
Plus de Takashi Uemura (20)
Dernier
Dernier (8)
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
- 1. @uemera 2014.7.6 WordBench神戸 上村崇 WordPressでオリジナルサイトを作るための 最初の一歩的なカスタマイズテクニック Photo by SalFalkoUsed with permission from Microsoft.
- 4. WordPressに標準添付されている デフォルトのテーマ "Twenty Fourteen" ! WordPress最新版 Version3.9.1 デフォルトテーマは 他に Twenty Thirteen (2013) Twenty Twelve (2012) があります。 ! ここでは最新機能が盛り込まれた Twenty Fourteen を使います。
- 6. wordpress > wp-‐content > themes > twentyfourteen ! にあります。 ! Twenty Thirteen, Twenty Twelveも 同じ場所にあります。 ! 新しいテーマを作る場合も、themesディレクト リの下にディレクトリを作成することになってい ます。 ! 今回はTwentyFourteenをディレクトリごとコピー して別のテーマ名をつけてから改造します。 テーマ用のファイルってどこにあるの?
- 9. 管理画面からテーマをカスタマイズする方法。 管理画面 > 外観 > カスタマイズ でカスタマイズ用のバーが出てきます。 できること： ・サイトタイトルの変更 ・ヘッダー画像の設定・表示 ・サイドバーの表示/非表示 など (背景色の変更はできません) ここでカスタマイズできます
- 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
- 17. TwentyFourteen トップページ専用のページはありません。 ! トップページも、投稿ページと同じく最新 の記事を10件表示しています。 トップページ 投稿ページ トップページだけレイアウトを変えるには、 専用のテンプレートファイルを作ります。 index.php index.php トップページ 投稿ページ 専用の テンプレートファイル index.php
- 18. デフォルトの状態では、 トップページに使われているテンプレートはindex.php Display Template Name というプラグインを 使うと、今使われているテンプレート名が分かるので 便利です。 index.php その前に、テーマファイルの基礎知識をおさえましょう
- 19. 例えば、index.phpは 中で複数のファイルを 呼び出しています。 header.php footer.php sidebar.php content.php footer.php sidebar.php content.php 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
- 21. トップページ専用のテンプレートファイルを作ります。 index.php トップページだけでなく、どのページにも使われる ことがあります。 home.php トップページだけでなく、他のページにも使われる ことがあります。 (投稿ページにも使われることがあります) front-‐page.php トップページにしか使われません。 index.php home.php front-‐page.php トップページだけ別の テンプレートを使いたい場合は、 front-‐page.php を使えばいいです。 トップページ 投稿ページ固定ページ アーカイブページ カテゴリーページ トップページになりうるテンプレートファイルの種類
- 22. front-‐page.php COPY index.php front-‐page.php ゼロからテンプレートファイルを作るのは大変なので、index.phpをコピーして front-page.phpを作ります。そして部分的に改造していきます。
- 25. 準備として、記事を先に作ります スラッグ名：information スラッグ名：blog お知らせ5 先着100名様にプレゼント お知らせ4 営業時間変更 お知らせ3 一部報道について お知らせ2 臨時休業のお知らせ お知らせ1 新製品入荷 カテゴリー名：お知らせ ワニに襲われたのに眠りこけていた人 簡易トイレにジェットエンジンをつけた男 火葬の最中本人から電話がかかる 議会、草刈機の代わりに羊を導入 銀行の手数料が嫌で川を渡る→遭難 カテゴリー名：ブログ 「お知らせ」はinformation、「ブログ」はblogというスラッグでカテゴリを作り、 記事を5件ずつ作っておきます。 スラッグとは：カテゴリを区別するための英字文字列です。重複しないように個別の名前を つけます。
- 27. 「お知らせ」カテゴリの記事を 新しい順に５件表示 記事タイトル 記事の抜粋 これは単なる画像 これは単なる画像 「ブログ」カテゴリの記事を 新しい順に５件表示 記事タイトル 記事の抜粋 ではどうやって作る? ソースコードを見てみましょう → トップページでやりたいこと
- 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件の記事を繰り返し処理して １件ずつタイトルと抜粋を表示します。 記事のタイトル 記事の抜粋 さらに： 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> 「お知らせ」最新５件表示 「最近の投稿」５件表示
- 35. サイドバーを自在にあやつる
- 36. サイドバーのデフォルト位置はこうなっています。 テンプレートファイルを改造すれば、 サイドバーを表示する位置も自由に変えられます。 フッターウィジェットエリア コンテンツサイドバー メインサイドバー
- 37. 管理画面の 外観 > ウィジェット と連動しています。 利用できるサイドバーの数は３つです。
- 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コードを書いてサイドバーの定義を行う必要があります。 (やや高度な知識が必要なため、説明は割愛します)
- 39. コンテンツサイドバーの位置を変更してみます。 この位置変更はcssを編集するだけではできなかったので、 front-page.php内に書かれているコンテンツサイドバー表示のコード <?php get_sidebar( 'content' ); ?> の記述している場所を移動しました。 コンテンツサイドバー
- 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>', ) ); 例えばこのように変えると、 管理画面の表現も変わります。 表記が変わった！ サイドバーは必ずしもサイドに配置する必要はありません。 ウィジェットを簡単に追加削除できる便利な箱として利用しましょう。
- 42. コメント欄を変えてみる
- 43. コメント記入欄のカスタマイズ いままでの例と同じように、「フォントの大きさ」「背景色」などはcss で調整できます。テキストエリアの大きさもcssで変えられます。 でも、 文字列を変えたい場合は？
- 46. テンプレートファイルから探すアプローチは諦めて、 HTMLコードから探します。 コメントブロック周辺にある、 comments-‐area comment-‐respond comment-‐reply-‐title といった検索しやすい特徴的な名前のクラス名を拾います。
- 47. grep検索すると、"comments-area"というキーワードがcomments.php に存在することが分かります。 grep検索(グローバル検索)できるエディタを使いましょう。 ! ! ! ! Windows Mac サクラエディタ 秀丸 Sublime Text2 など TextWrangler mi Sublime Text2 Coda2 など
- 49. comment_form関数がコメント欄を担当していることは分かりました。 では次に、wp-include/comment-template.php のcomment_form関数の中に入って、がまん強くソースを見てみます。 <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> comment-‐reply-‐title発見！ さきほどブラウザのインスペクタで調べた時には このクラスの中に「コメントを残す」文字列が表示されていた のでした。
- 50. したがって、 wp-include/comment-template.php のcomment_form関数(2112行目)を以下のように変えれば良い！ <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> <h3 id="reply-‐title" class="comment-‐reply-‐title"> コメントを残してちょ! <small><?php cancel_comment_reply_link( $args['cancel_reply_link'] ); ?></small> </h3> これで望み通りの結果を得ることができます。
- 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 の設定を使うっぽい(想像) 上へ
- 53. 模範解答： WordPressのコアファイルwp-include/comment-template.php に手を入れるのではなく、 テーマファイルの中にある"comments.php" を改造します。 <?php comment_form(); ?> <?php $args = array( 'title_reply' => 'こめんとを残してちょ！' ); comment_form($args); ?> コメントのタイトルである、$args['title_reply']を 関数の外から指定してあげれば良い！ こうすることで、WordPressコアファイルに触れず、 テーマファイルだけで変更ができます。