とあるため、プラグインフォルダの下のスクリプトやテーマフォルダのスクリプトの場合にはURLを直接書き込まないようにしましょう。具体的なやり方を次から説明するので、参考にしてください。CSSやJavascriptの置き場所テーマを世界中に公開するのでなければ、基本的にどこに置いてもいいと思います。管理しやすい方法が良いと思いますので。私は、Web一般で用いられている作法で置いた方がわかりやすいと思っています。wordpressのルートディレクトリの下に「assets」フォルダを作成してその下に「css」ディレクトリ、「js」ディレクトリを新規に作り、それぞれCSSをJavascriptを放り込んでいます。CSSフレームワークbootstrapのcssとjsを適用したい場合には、ダウンロードしたソースを、次のように作成したディレクトリに入れます。置いたスクリプトをWordPressで読み込むように登録する上記方法で、スクリプトを置いただけではまだ読み込まれません。上で説明したようにwp_enqueue_scriptsを使います。それではfunctions.phpに書いてみましょう。);そしてサイトを表示させます。本当に読み込まれているか「ChromeのDeveloperツールなど」で確認すると。assetsディレクトリの下にあるCSSとJSが読み込まれているのが確認できます。これでデザインも自由自在ですね!今回はbootstrapを用いましたが、もちろん同じように自作したCSSやJSを設置して反映させることもできます。functions.phpのURLのところにCDNのURLを入れても読み込ませることができます。Tumblr広告を非表示にするもっと読むコメントを書く2018-09-07WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。Wordpressこんにちは、今回はWordPressのアーカイブ機能カスタマイズしていきます。アーカイブ表示とは?アーカイブページは「archive.php」を作れば良いアーカイブページのタイトル個別投稿ページへのリンク記事の抜粋ページングカスタム投稿タイプにも一覧機能をつけたいWP_Queryでカスタム投稿を取り出す!アーカイブ表示とは?そもそも、アーカイブ機能とは何でしょうか?投稿や固定ページとは違ってあまり馴染みのない機能なのではないでしょうか。アーカイブとは記事を一覧表示する機能なので、投稿一覧をいい感じに作ることができるものです。通常、カテゴリーをクリックした際に、そのカテゴリーに属する記事が一覧で表示されると思いますが、そのページがアーカイブページになります。カテゴリーの他にも、タグや、日付(日別・月別・年別)での結果もアーカイブページになります。カスタム投稿タイプで新しく別の投稿タイプを作成した時に、それぞれ別のレイアウトの一覧ページを作りたい!なんて要望もあると思います。通常はリスト表示が多いのですが、これをグリッド形式にしてアルファブログにあるような形に整形することも可能です。アーカイブページは「archive.php」を作れば良いそれではアーカイブページを作っていきます。言っても、アーカイブページの作り方は、固定ページや投稿ページと同じです。WordPressループを利用し、テンプレートタグを使って必要な情報を揃えていけば良いだけです。いつもの基本的な記述で作ってみましょう。?>そうすると、先ほどのように表示されるテンプレートができました。これはアーカイブ特有のタグが埋め込まれていない状態ですので、ここから更にアーカイブ特有のタグを埋め込んでいきます。アーカイブ特有の機能は次の通りです。アーカイブページのタイトル:何の括りで一覧化しているかを示すタイトルをつけます個別投稿ページへのリンク:記事ページへのリンクをタイトルに付ける記事の抜粋:本文を全文出すのではなく、140文字など適当な文字数のみにする。ページング:複数の記事が該当した際にページングさせ、前の一覧や次の一覧へのリンクを付けるアーカイブページのタイトル次のように条件分岐を利用して、タイトルを表示させると良いです。?>カテゴリのアーカイブタイトルを表示する場合はsingle_cat_title()タグのアーカイブタイトルを表示する場合はsingle_tag_title()日付けのアーカイブタイトルを表示する場合はget_the_date(を使用します。個別投稿ページへのリンクh1タグの中身をリンクに書き換えます。記事の抜粋を表示するにはthe_excerpt()を利用します。アーカイブ表示でサムネイルを表示させるにはthe_post_thumbnail();を使えば表示できるのですが、テーマがサムネイルに対応している必要があります。ページング複数の記事が該当した際にページングさせるには、投稿ナビゲーションthe_posts_pagination()を使います。投稿ナビゲーションは配列形式で次のようなパラメータを取ります。mid_size:現在のページの左右にそれぞれ表示するページ番号の数。初期値は1prev_text:前のページへ遷移するためのリンクに使われる文字列。初期値は「前へ」next_text:次のページへ遷移するためのリンクに使われる文字列。初期値は「次へ」screen_reader_text:読み上げ用のテキスト。screen_reader_textは表示されないように半角スペースを入れました。?>カスタム投稿タイプにも一覧機能をつけたいこれまでは、通常の投稿の際のやり方でした。カスタム投稿タイプは別の方法が必要になります。「archive-{slug}.php」のファイルを作れば良いだけかな?と思ってやってみると上手くいきません。通常の投稿タイプの一覧が表示されてしまいます。試しにslugが「blog」の場合の「archive-blog.php」でやってみます。実際に作って確認してみましょう。今までの機能を全部乗せしたバージョンを作成していきます。?>WP_Queryでカスタム投稿を取り出す!上記コードのWordPressループの部分を変更して、カスタム投稿タイプの記事のみ取得するようにカスタマイズします。?>説明:WordPressループの前にWP_Query()を利用して、カスタム投稿タイプ「blog」の投稿を取得してきます。それを$queryに入れて、そこから表示しています。このあたりわからない場合にはこちらの記事を見るといいですよ。hollywis.hatenablog.comそして、URLにサイトタイトルの後に「?post_tyle=blog」というパラメータを渡してやると表示されます。http://localhost:8888/localtest/?post_type=blogなお、この一覧ページはナビメニューを表示させて、設定することもできます。外観設定からメニューを作って、そこにblogの一覧を設定します。合わせてheader.phpの任意の場所にナビメニューを表示する次のコードを挿入します。?></div>上記の表示例の左上にメニュー[blogs一覧]が表示されているかと思います。これでカスタム投稿タイプ別に自由に一覧ページを作成することができますね!次回はCSSフレームワークを利用して、この一覧ページのデザインを綺麗に整えていきたいと思います。16:00WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。一覧の場合は最初の1記事しか表示されない。?>のように日付タグは()中にフォーマットを指定することができます。?>このようにechoを使ってgetメソッドで取得した値を表示させる方法もあります。違い何度も利用できます。?>初期表示ではリストになります。?>このように()内に複数のカテゴリに属していた場合の区切り文字を指定できます。?>こんな感じでHTMLタグで挟む方法もあります。?>ページ分割した記事を表示するwp_link_pages():ページ分割された記事のページングを表示WordPressでは長い記事の場合には、「続きを表示する」などの表記を入れてそれ以降の表示を短縮することができます。記事の編集画面で本文中に<!--nextpage-->を入れると、その箇所で記事をページ分割することができます。この分割された記事のページングを表示するためにwp_link_pages()を利用します。このタグはループ内で使用する必要があります。次回はアーカイブページを作成します。Tumblr広告を非表示にするもっと読むコメントを書く2018-09-05WordPressテーマの投稿ページのテンプレートを作成するWordpressこんにちは、前回は固定ページのテンプレートを作成しました。hollywis.hatenablog.com今回、第11回目は投稿ページのテンプレートを作成していきます。投稿ページはWordPressで定期的な記事の投稿時に利用する機能です。ブログ機能とも言えますが、投稿タイプを増やすことで様々な投稿に対応しています。今回はこの投稿ページのテンプレートの作成方法をご紹介します。投稿ページのテンプレートを作成することで、その他のページと独立して自由にデザインを設定することができます。テンプレートファイル名は予め決まっており「single.php」になります。テーマの中にsingle.phpがある場合、投稿ページを表示する際の挙動が、index.phpよりもsingle.phpの方が表示優先度が高くなります。この仕組みを利用して、投稿ページのテンプレートを作ります。それでは実際に書いて見ましょう。「single.php」というファイル名でテーマ直下に新規作成し、次のようにコードを記載します。?>固定ページとほぼ一緒です。実は、その他にヘッダーやフッター、サイドバー、などの表示も一緒です。詳しくはこちらを参照ください。hollywis.hatenablog.com投稿ページのデザインの使い分ける方法このままでは表示が味気無いので、CSSを触ってデザインを強化したいと思います。別の投稿タイプの時にデザインを変えたい場合はどうすればいいのでしょうか。(例:ブログ、プレスリリースなど)そこで、WordPressでは固定ページと同様に投稿ページ毎にデザインを変える方法が2つ用意されています。ページ毎に違うidやclassを自動的に埋め込む投稿タイプ毎にページテンプレートを作る投稿ページのテンプレート階層は次の通りです。このように、投稿タイプ(post_type)毎にテンプレートを作ることができます。それでは試しに、作成しましょう。Ui」を入れることです。Ui」で検索してインストールし有効化します。UI」という項目ができているので、そこから「投稿タイプの追加と編集」を押します。今回はカスタム投稿タイプ「blog」と増やしたいと思います。このように入力して、「投稿タイプと追加」ボタンを押して登録完了です。管理画面のメニューに「投稿」の他に「blog」のメニューが追加されているかと思います。ここから記事を追加することができます。カスタム投稿タイプ用のテンプレートを作成するカスタム投稿タイプ「blog」ができたので、これに対応するテンプレートを作成します。ファイル名は「single-blog.php」です。内容は次のようにします。?>そして、試しにblogの記事を1つ書いて、表示させてみます。このような感じで、投稿タイプ毎にテンプレートを設定することができました。次回は、個別ページで利用できるテンプレートタグをいくつか紹介します。Tumblr広告を非表示にするもっと読むコメントを書く2018-09-04WordPressテーマの固定ページのテンプレートを作成するWordpressこんにちは、今回はWordPressのテーマの固定ページを作成またはカスタマイズする方法を紹介します。前回はコンテンツん出し方でWordPressループについて触れました。今回は第9回目、前回の実践編という位置付けです。固定ページはWordPressで定期的な記事の投稿ではなく、トップページや会社概要などの静的情報を表示したい時に利用する機能です。この固定ページのテーマの作成方法をご紹介します。固定ページのテンプレートファイルを作成することで実現します。ファイル名は予め決まっており「page.php」になります。テーマの中にpage.phpがある場合、固定ページを表示する際の挙動が、index.phpよりもpage.phpの方が表示優先度が高くなります。この仕組みを利用して、固定ページのテンプレートを作ります。それでは実際に書いて見ましょう。?>このようにWordPressループを利用して書くだけですね。page.phpであることが判別できるようにh1タグの中に「:page.phpによる固定ページ」という文を入れています。?>page.phpは固定ページを開いた時のみ表示されるためifによる条件分岐は省略することができます。この状態で固定ページを表示するとこのようになります。共通のヘッダーやフッターを付ける上記コードでは、ヘッターやフッターがありませんので、付けてみたいと思います。表示例はこちら共通のサイドバーを付けるあまり付けることは無いと思いますが、サイドバーを付ける場合はこんな感じです。?>でsidebar.phpを書けば良いです。固定ページのデザインの使い分けこのままでは表示が味気無いので、CSSを触ってデザインを強化したいと思います。このままでは固定ページを複数作った際に(例:会社概要ページ、事業内容紹介ページ、商品紹介のランディングページなど)、ページ毎にデザインを変えることができないかと思います。そこで、WordPressでは固定ページ毎にデザインを変える方法が2つ用意されています。ページ毎に違うidやclassを自動的に埋め込む固定ページテンプレートを複数作る1つ目の手法は、HTMLは極力変えずに構造は残したまま、CSSのみでデザインを整える場合。2つ目の手法は、HTMLも変えて丸っ切り別のページにする場合です。「商品紹介のランディングページ」は手法2の丸っ切り作るなど、合わせ技を使う方法も良くあるかと思います。固定ページ用のページ毎に違うidやclassを自動的に埋め込む最初の状態のページにidやclassを付加させていきたいと思います。?>で自動的に規定のclassを設定しています。idは何となくわかると思いますが、実際にclassは何が付くのでしょうか。chromeの開発者ツールで確認してみたいと思います。この固定ページのIDは2なのですが、classは次のようなものが付きました。post-2pagetype-pagestatus-publishhentry記事毎にデザインを変えたい場合には「post-2」のようなidまたはclassを利用し、固定ページ全般に設定したい場合には「page」や「type-page」を利用し、記事ステータス毎に変えたい場合には「status-publish」を使っていけば良いかと思います。最後の「hentry」ですが実はこれはかなり厄介で、このclassを書いたならばしなくてはいけないことがあるようです。http://kishinoko.lovepop.jp/web/hentry.htmlmicroformatsと言う規格で「hentry」タグについて規定されており、このタグを書く場合には併せて次の情報も必要になります。(記事の著者:必須項目)これをしないとGoogleの検索エンジンにページ内のエラーとして検出されてしまうようです。適切に作られていないWordPressのテーマなんかには多いみたいです。そのため、次のように該当箇所に上記classを割り当てる必要があります。表示させたく無い場合にはstyle="display:none;"で非表示にさせてしまえば良いかと思います。固定ページテンプレートを複数作る次の、HTML構造も新しく作り直したい場合に移りたいと思います。この場合は、別のファイルを作成するのですが命名規則に2つの選択肢があり、次の通りです。page-{ID}.phppage-{slug}.phpそのほか、カスタムテンプレートを作る方法もありますが、ここでは割愛します。slug(スラッグ)というのは、個別ページや固定ページの識別子のことで、主にURLの一部として利用されます。管理画面では「表示オプション」から「スラッグ」にチェックを入れると確認することができます。表示の優先順位はIDの方が高いため、どちらもある場合にはIDの方が表示されます。このように固定ページのテンプレート表示順は、カスタムテンプレート、page-{ID}.php、page-{slug}.php、index.phpとなります。それでは試しに、スラッグでのページ作成を行ってみます。ファイルを新規作成し、スラッグ名が「sample-page」のテンプレート「page-sample-page.php」を作ります。コードは少し改変して次の通りです。?>そして該当のページを開くとこの通り表示されました。以上で、固定ページの表示を終わります。次回は個別ページのテンプレートを作成していきます。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。