はてなブックマーク

投稿と固定ページで、最優先されるテンプレートは『カスタムテンプレート』になります。(※作成方法については、本記事の『投稿や固定ページに様々なテンプレートを適応する』で解説します。) デモでは、投稿と固定ページのテンプレートを『single.php』と『page.php』に分けて作成していますが、『single.php』と『page.php』を作成せずに『singler.php』を作成することで、投稿と固定ページを共通のテンプレートで出力できます。 基本的なテンプレートの優先順位については以上です。上記の他にも『カスタム投稿』『カスタムタクソノミー』『検索結果』『404』ページなどの分岐がありますが、今回は作成しないので別の記事で詳しく説明しています。 上記を踏まえた上で、各テンプレートをWordpressテーマに追加・編集していきましょう。 トップページに独自の要素とデザインを追加する 『

サブループを使用する場合は、ループ終了後に『wp_reset_postdata();』を記述して必ずループをリセットしてください。ループのリセット処理を行わないと、後のループに悪影響を与えてしまうので忘れないように注意しましょう。 サブループを自動で作成できる『WordPressサブループ自動作成ツール』を公開しました。ページネーションも自動で出力でき、カテゴリ・タグ・著者・ターム・日付・投稿・固定ページ・カスタムフィールドなど、様々な条件をセレクトボックスで選択するだけでサブループを出力するためのコードを自動で作成することができますので、ぜひ利用してみてください。 WordPressサブループ自動作成ツール index.phpにコンテンツを追加する index.phpは、『WordPressレスポンシブテーマ作成1』でご紹介したように、トップページ・カテゴリ・タグ・検索結果ページなどの一

WordPressに追加できる特徴的な機能として、カスタム投稿とカスタムタクソノミーという、自分でオリジナルの投稿機能やカテゴリを追加することができる機能があります。 簡単に追加することができるプラグインも用意されていますが、細かい調整がきかなかったり、自分が予想できない不具合を防止したりするためにも、どういう仕組みなのか理解を深めて自作でWordPressテーマに追加してみましょう。 今回は、カスタム投稿とカスタムタクソノミーをWordPressに追加し、独自のアーカイブページ(記事一覧)や投稿ページ(個別の記事)を作成して実際に運用できるようにするまでを、すべてまとめてご紹介します。 カスタム投稿を追加する まずは、カスタム投稿を作成するための設定を追加しましょう。その前に、カスタム投稿について少しだけ説明します。 カスタム投稿とは・・・？ カスタム投稿とは、WordPressの『投稿

WordPressのテーマを作成するというと、なんとなく複雑で難しそうなイメージがありますよね。 以前は、私も既存テーマ+プラグインという方法でブログやホームページを運用していたのですが、欲しい機能をプラグインで追加したり、デザインのためにcssを追加したりしていく内に、テーマの中身が複雑化しサイトの表示スピードも遅くなってしまっていました。 そこで、「既存テーマに縛られて様々な制約を受けるくらいなら自分でテーマを作成してしまおう」と思ったのが、自作のwordpressテーマを作成したキッカケです。 テーマを作成し始めた頃の知識としては、PHPはおろかHTMLとCSSですらあまり理解していない状況からのスタートでしたが、そんな状態の私でもなんとか完成させることができ、今ではWeb制作やWebディレクションを本業としてお仕事をいただいております。 wordpressのテーマは、一見複雑で難し

記事のアクセス数を計測し、記事がどのくらい読まれているのかを把握することで、ブログ運営の指標とすることができます。 また、カウントしたView数は『人気記事』を出力する際にも使用することもできますので前準備として作成しておきましょう。 今回は、記事のアクセス数をプラグインなしで計測し記事のView数と設定しているアイキャッチ画像が管理画面上に表示される方法をご紹介します。 記事の閲覧数をカスタムフィールドで計測するための関数を追加する まずはアクセス数をカウントするために、WordPressの記事ページにカスタムフィールドを追加し、アクセスがあったら値を+1する関数をfunctions.phpに追加します。 functions.phpに追加 //アクセス数を保存 function set_post_views($postID) { $count_key = 'post_views_coun

WordPressのテーマを作成するためには、はじめに最低限テーマとして動作させるためのファイルをアップロードする必要があります。 このアップロードするファイルは、WordPressのサイトをphpで生成する際に必ず呼び出される、サイトの骨組みとも言えるテンプレートファイルなので事前にローカル上(自分のパソコン上)で準備しましょう。 今回は、WordPrssテーマを構成するための基本的なテンプレートの作成方法と役割についてご紹介していきます。 テーマに必要な最低限のテンプレートを作成する テーマに必要な最低限のテンプレートファイルを作成しましょう。最低限ブログとして機能させるために必要なテンプレートは、『functions.php』『index.php』『single.php』『header.php』『footer.php』『style.css』の6つですが、サイトにサイドバーを表示させる

WordPressに骨組みテーマをアップロードしたら、全体のレイアウトをCSSで整えていきます。 全体のデザインを決める大事な部分なので、サイトの形をしっかりと決めてCSSで配置やデザインをレイアウトしていきましょう。 今回は、テーマの骨組みテンプレートを可視化し、サイト全体の構成をレスポンシブデザインにレイアウトする方法をご紹介します。 サイトの構成をイメージする WordPressのページは、各テンプレートを呼び出して一つのページを呼び出しています。骨組みテンプレートに現在記述している構成では、トップページやカテゴリページなどでは、『index.php』『header.php』『footer.php』『sidebar.php』の4つのテンプレートでページを構成し、投稿ページや固定ページでは、『single.php』『header.php』『footer.php』『sidebar.php

あなたは、WordPressのテーマを作成したり編集したりするときどうしていますか？私はローカル環境のWordpressでデザインを実際に確認しながらATOMで作成・編集を行っています。 WordPressのテーマの編集を行うときは、管理画面から直接編集するのはなるべく避けるようにしましょう。管理画面からの直接編集は、何のサポート機能もないので編集がし難い上にコードミスによるトラブルも起こりやすくなります。 この記事では、私が実際に使っているATOMを使ってWordPressテーマの作成・編集する方法についてご紹介します。 ATOMとは ATOMとは、GitHubが主体となって開発しているオープンソースのコードエディタです。Windows・MAC OS X・Linuxに対応しているため環境を選ばずに使用することができます。 さらに、沢山のプログラム言語も扱うことができるうえに、パッケージを

WordPressサブループソースコード自動作成ツール WordPressのサブループのソースコードを、簡単に自動で出力することができます。ページネーションも自動で出力でき、WordPr... 2018年12月17日 カスタム投稿とカスタムタクソノミーを自作しプラグインなしでWordPressに追加する カスタム投稿とカスタムタクソノミー(ターム)をfunctions.phpからWordPressに追加し、専用のアーカイブ(一覧)ペ... 2018年10月7日

WordPressには検索フォームが標準で搭載されていますが、あまり良いデザインとは言えません。自分が作成するテーマのデザインに合わせて、検索フォームのデザインも変更してみましょう。 今回は、WordPressに標準で搭載されている検索フォームを自由にカスタマイズする方法についてご紹介します。 searchform.phpを作成する WordPressに標準搭載の検索フォームのデザインを変更するためには、テーマファイル内に『searchform.php』というWordPressテンプレートを新しく作成する必要があります。 『searchform.php』というテンプレートを作成することで、検索フォームを呼び出す『<?php get_search_form(); ?>』や検索ウィジェットは『searchform.php』テンプレートを参照するようになります。 『searchform.php』

WordPrssにはデフォルトのウィジェットがいくつか用意されていますが、『人気記事』を出力するためのウィジェットは用意されていません。ユーザーにより多くの記事を読んでもらうためにも、『人気記事』をウィジェットに追加して簡単に出力できるようにしておきましょう。 人気記事の出力方法さえわかれば、ウィジェットで出力するだけでなく、WordPressの各テンプレートでも出力できるようになりますよ！ 今回は、プラグインを使わずにウィジェットに『人気記事』を出力する方法についてご紹介します。 ※人気記事を出力するためには、カスタムフィールドに記事の閲覧数をカウントするための値を保存しておく必要があります。投稿数をカスタムフィールドに追加するプラグインを有効化するか、link:『記事のアクセス数をプラグインなしで計測しWordPressの管理画面に表示する』を参照し、カスタムフィールドに記事の閲覧数を

SNSでの拡散力は、ブログを運営していく上で無視できません。SNSでユーザーにシェアしてもらうことで、新しいユーザーを獲得できる機会も大きく増やすことができます。 WordPressの中の記事やサイドバーにSNSボタンを設置して、ユーザーがSNSでシェアしやすいような導線作りをしておくことは必須と言っても過言ではないでしょう。 今回は、WordPrssの記事の中やサイドバーにプラグインなしでSNSボタンを設置する方法をご紹介します。 各SNSへのリンクをまとめたsns.phpを作成する まずはクリックやタップすることで、各SNSで簡単にシェアできるリンクをまとめたテンプレートをテーマ内に作成しましょう。 手軽に呼び出すことができるように、『sns.php』というテンプレートをWordPressテーマ内に新たに作成します。 ※ウィジェット以外に設置する場合は、SNSボタンを追加したいテンプレ

WordPressのテーマを作成・編集する際に、公開しているサイトで直接編集するのはあまり好ましくありません。Web上で直接編集するのではなく、ローカルの自分のパソコン上でWordPressを編集したりプラグインの動作を確認したりできる環境を作っておくと自分好みのサイトを作成する際に便利です。 私は、ローカル環境をフリーで構築できるXAMPPを使ってWordPressをテーマを作成・編集しています。この記事では、XAMPPのインストール～WordPressの導入までをご紹介します。 WordPressをローカル環境で動かすには？ WordPressなどのWeb環境を構築する際には、動作させるためのソフトウェアが必要です。ソフトウェアが入っていなければきちんと動作してくれません。 WordPressは、 Webサーバ → Apache SQLデータベース → MySQL Webで動作するプロ