はてなブックマーク

ナビゲーションメニューにサブメニューを追加する管理画面の［外観］→［メニュー］に移動します。 サブメニューを追加サブメニューを追加するには、項目をマウスでつかんでドラッグし、ドロップするときに少し頭を下げて配置します。これだけでサブメニューを実現することができます。 これをそのままwp_nav_menu()を使用して表示すると、次のようなリスト形式で表示されます。 メニューをそのまま表示それぞれにリンクがついていますので、メニューとしてはこのままでも十分機能しますが、今回はこれをドロップダウンリストに変更してみます（サブメニューに対応しているテーマなら、何もしなくてもきちんとドロップダウン形式などで表示してくれます）。 CSSでドロップダウンリストに変更するCSSの:hover疑似セレクタを使えば、「親のメニューにマウスオーバーしたときにサブメニューを表示する」ということを実現できます。

投稿の全件数は$wp_queryのfound_postsというプロパティが保持しています。 <?php echo $wp_query->found_posts; ?>たとえば、投稿一覧の先頭に記事の総数を表示するには次のように記載します。 <?php if ( have_posts() ) : ?> <div class="entry-count"> <?php echo $wp_query->found_posts; ?>件の記事が見つかりました。 </div> <?php while( have_posts() ) : the_post(); ?> <section id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="entry-thumbnail"> <?php the_post_thumbnail();

投稿に付けたタグを取得するには、get_the_tags()を使います。戻ってくる値はタグの配列です。 投稿に付けたタグを配列で取得する投稿に付けたタグを取得するには、次のようにします。 <?php $tags = get_the_tags(); ?>この関数はget_the_category()と同様、引数に投稿のIDを渡せば、WordPressループの外でも使うことができます。IDを指定しない場合は、現在の投稿が使われれます。 この関数はWP Termオブジェクトの配列を返します。この点もget_the_category()と同じです。試しにログで出力すると、次のような結果が得られます。 array ( 0 => WP_Term::__set_state(array( 'term_id' => 8, 'name' => '夜', 'slug' => '%e5%a4%9c', 'term

抜粋の文字数を変更する抜粋の文字数はデフォルトで55単語、日本語などのマルチバイト文字では110文字になっています。ただし、日本語の抜粋がうまく機能するためには、WP Multibyte Patchプラグインが有効になっている必要がありますので注意してください。 この文字数を変更するには、excerpt_lengthフィルターを利用します。 function twpp_change_excerpt_length( $length ) { return 50; } add_filter( 'excerpt_length', 'twpp_change_excerpt_length', 999 );これをfunctions.phpなどに記載すると、抜粋の長さが50文字に変更されます。文字数を変えるには、2行目の数値を修正します。 filterの第3引数、priorityが999になっていることに

投稿画面で抜粋を有効にする「抜粋」を編集する機能は、初期状態で有効になっていません。まず［表示オプション］から抜粋を有効にします。抜粋を自動生成したい場合はこのステップは必要ありません。 表示オプション投稿編集画面の右上にある［表示オプション］をクリックすると、次のように一覧が表示されます。 表示オプション一覧表示オプション一覧の中に［抜粋］チェックボックスがありますので、クリックして有効化します。すると、投稿画面の下の方に、抜粋編集ボックスが現れます。 抜粋編集フィールド投稿の抜粋をここに記載します。抜粋は主に記事一覧の中で内容のプレビューとして使用したり、あるいはメタタグのdescriptionやog:descriptionのコンテンツとしての用途が考えられます。 通常いちいち抜粋文を作成するのは面倒なので、本文から自動生成する場合が多いとは思いますが、ある記事のプレビューだけ特に変更

テーマディレクトリまでのURLを取得するWordPressでは、画像やスクリプトファイルの読み込みにURLを使用します。テーマディレクトリ（style.cssのあるディレクトリ）を取得するにはget_template_directory_uri()を使用します。 <?php $uri = get_template_directory_uri(); ?>この結果、$uriにはたとえば次のようなURLが入ります。 http://localhost/minimalist/wp-content/themes/minimalist末尾にスラッシュは付きません。 たとえばテーマディレクトリにimagesというフォルダをつくって、そこにlogo.pngという画像ファイルを保存したとします（images/logo.png）。この画像を表示するには、次のように記載します。 <img src="<?php e

投稿の並び順を変更する方法メインループのクエリ条件を変更するには、pre_get_postsというアクションフックを利用します。このライブラリで説明している通り、query_posts()は使用してはいけません。 function twpp_change_sort_order( $query ) { if ( is_admin() || ! $query->is_main_query() ) { return; } if ( $query->is_home() ) { $query->set( 'order', 'ASC' ); $query->set( 'orderby', 'title' ); } } add_action( 'pre_get_posts', 'twpp_change_sort_order' );並び順を変更するには、クエリの順序付けパラメータを変更します。7行目で順序

記事の日付を出力する記事の日付は、次のようにして簡単に出力することができます。WordPressループの中で使用してください。 <?php the_date(); ?>実行すると、たとえば「2017年10月10日」のような結果が得られます。ただし、Codexに記載がある通り、the_date()関数は同じ日付を2回以上連続して出力しません。記事一覧で同日の投稿があった場合、後に出てきた投稿の日付は省略されることになります。 同じ日付でも表示したい場合は、次のどちらかの方法を用います。 <?php echo get_the_date(); ?><?php the_time( get_option( 'date_format' ) ); ?>前者のget_the_date()は日付を文字列として取得する関数で、こちらは1回の制限がありませんので、同日でもechoを用いて投稿日を出力することがで

前回の記事までで、既存のテーマを利用してWebサイトを作成するまでの一通りの手順を見てきました。簡単なWebサイトなら、すでに最低限必要な機能はそろっていますし、ブログサイトなら、記事を書きさえすれば公開する準備が調っています。 そこで、この記事ではWordPressで作成したWebサイトを、一般に公開する手順を説明したいと思います。 WordPressによるWebサイトを本番環境に公開するまでの流れ 公開までの全手順まとめ 最初に、WordPressによるWebサイトを一般公開するまでの流れをまとめておきます。 レンタルサーバと契約する ドメインを取得する レンタルサーバにドメインを追加する ネームサーバを設定して、ドメインをレンタルサーバと関連付ける レンタルサーバにWordPressをインストールする ローカルのデータをレンタルサーバにアップロードする ローカルのMySQLデータをエ

たくさんの引数があり、どれも初見では理解しにくいですが、単にテーマのスタイルシートを読み込みたいだけであれば、functions.phpに次のようなコードを書けば問題ありません。 function twpp_enqueue_styles() { wp_enqueue_style( 'main-style', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );wp_enqueue_style()の第1引数にはスタイルの名前を、第2引数はスタイルシートまでのURLを渡します。スタイルシートの名前は、たとえばプラグインのスタイルシートの名前などと被らないよう注意してください（通常プラグインが側で名前を工夫しているはずですので、あまり気にする必要はありません）。get_styles

ページ番号付きリンクでページネーションを実装するページ番号付きリンク（ページネーション）ページ番号付きリンクとは、記事一覧ページの下部でよく見る、ページ番号が付いたリンクのことです。WprdPressではデフォルトで1ページあたり10件記事が表示されますので、2ページには11件目から20件目までの投稿が、3ページには21件目から30件目までの投稿が表示されることになります。 実装が難しそうに思えますが、WordPressではthe_posts_pagination()を使って簡単に実装することができます。 <?php the_posts_pagination(); ?>この関数は中でpaginate_links()を読んでおり、以前はこれをそのまま使用していました。こちらの方がより詳細に出力をカスタマイズできるのですが、パラメータが多く扱いにくいので、the_posts_paginatio

たとえば、jsフォルダに保存されたmain.jsというスクリプトファイルを読み込むには、functions.phpに次のように記載します。 function twpp_enqueue_scripts() { wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js' ); } add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );wp_enqueue_script()の第1引数にはスクリプトの名前を、第2引数にはjsファイルまでのURLを渡します。get_template_directory_uri()はテーマのディレクトリまでのURLを返す関数です。 これにより、<head>タグ内に次のようなコードが出力されます。 <scrip

投稿のIDを出力するWordPressループの中で投稿のIDを出力するには、次のようにします。 <?php the_ID(); ?>IDを直接Webページに表示するケースはないと思いますが、たとえば次のようにして、HTMLのタグに一意なIDを割り当てることができます。 <section id="post-<?php the_ID(); ?>">結果、実際のHTMLは次のようになります。 <section id="post-140"> ... </section> <section id="post-137"> ... </section>JavaScriptで投稿を識別する際などに便利です。 投稿のIDを取得するWordPressループの中で投稿のIDを文字列として取得するには、次のようにします。 <?php $post_id = get_the_ID(); ?>引数に投稿のIDを渡す必要

記事の本文を出力する記事の本文を表示するには次のようにします。 <?php the_content(); ?>theがついているのでWordPressループ内で使用します。次のようにすると、記事のタイトルと本文を出力するWordPressループを作成することができます。 <?php if ( have_posts() ) : ?> <?php while( have_posts() ) : the_post(); ?> <h2><?php the_title(); ?></h2> <p><?php the_content(); ?></p> <?php endwhile;?> <?php endif; ?>この処理を実行すると、例えば次のような結果になります。 WordPressループの例の実行結果個別ページでも同じように使用できます。個別ページではpタグではなくdivで囲うなどすることに

前回の記事で、テーマのカスタマイズにはいくつかの方法があるということと、その一つであるテーマカスタマイザーによるカスタマイズ方法について説明させていただきました。同時に、テーマカスタマイザーによる修正には限界があること、あるいは「追加CSS」だけでは広範囲にわたる調整が効率的ではないことについても触れました。 今回紹介する「子テーマ」によるカスタマイズでは、ありとあらゆる範囲の修正が可能になります。バージョンアップによって修正が上書きされてしまうこともありません。 「テーマをカスタマイズする」というトピックでは最終段階にあたる、「子テーマ」によるカスタマイズを見ていきましょう。 「子テーマ」を検討する前に 「テーマをカスタマイズする」と言えば「子テーマを作成する」という短絡的なことはせず、まずは前回の記事およびそれ以前の記事を読んで、「子テーマ」をつくらなくてもカスタマイズできないかどうか

記事のタイトルを出力する記事のタイトルを表示するには次のようにします。 <?php the_title(); ?>theがついているのでWordPressループ内で使用します。たとえば次のようにして、記事のタイトルのみを一覧表示することができます。 <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h2><?php the_title(); ?></h2> <?php endwhile;?> <?php endif; ?>タグを合わせて出力するthe_title()は次のような引数を取ります。