はてなブックマーク

WordPressを使っていると気になるのが「フォルダ構成はどうなっているのか？」ですが、勘違いしている部分もあるかもしれません。基本的なフォルダ構成を理解しておきましょう。 WordPressのフォルダ構成はレンタルサーバーのFTPツールまたはFTPソフトで確認できます。WordPressをインストールしたフォルダを開くと、次のようにwp-admin、wp-includes、wp-contentというフォルダが見つかります。 WordPressのインストール先フォルダ 「WordPressの移転がうまくいかない」というご相談をよくいただきますが、少なくともwp-admin、wp-includes、wp-contentという3つのフォルダが存在しなければ、ファイル一式のコピーに失敗しています。 インストールされたフォルダの用途は次のとおりです。 wp-admin --- WordPress

カスタムフィールドを出力するにはPHPのコードを記述する必要があります。ここでは、Advanced Custom Fieldsプラグインで作成した定番のカスタムフィールドを画面に表示する例で説明します。 具体的には3種類のカスタムフィールドを取り上げます。 テキストフィールド --- 文字を入力するフィールド 画像フィールド --- 画像をアップロードするフィールド ファイルフィールド --- ファイルをアップロードするフィールド 表示イメージは次のようになります。イベント情報の記事の中で3種類のカスタムフィールドを使っています。 3種類のカスタムフィールドの表示結果 出力するカスタムフィールドの準備 ここではAdvanced Custom Fieldsプラグインを使って次のようなカスタムフィールドを準備しました。 作成したカスタムフィールド（テキスト・画像・ファイル） それぞれのフィール

WordPressで作成する固定ページを表示するときのデザインを決めるテンプレートファイルはpage.phpです。ただし、「固定ページの表示＝page.phpだけが使われる」わけではありません。以下、事例を紹介しながら固定ページの表示に使われるテンプレートを整理していきます。 固定ページの基本テンプレートはpage.phpですが… まず、基本的には固定ページを表示するときに使われるのはpage.phpです。 ただし、page.phpを開いても固定ページのタイトルを表示するthe_titleや本文を表示するthe_contentなどのお約束のコードが書いてない場合があります。 たとえば、Twenty Twelveのpage.phpは次のようになっています。 <?php get_header(); ?> <div id="primary" class="site-content"> <div

WordPressでテンプレートの中にショートコードを入力したいこともあります。活用法はさまざまですが、たとえば、すべての記事の下にContact Form 7の問い合わせフォームを表示することもできるので非常に便利です。 ショートコードを使って記事下にContact Form 7の問い合わせフォームを表示 「テンプレート　ショートコード」でネット検索すると「do_shortcode」という命令が見つかるかもしれませんが、PHPに慣れていないと編集がうまくいかないこともあります。その仕組みを含めて使い方を簡単に紹介します。 テンプレートに入力したショートコードがそのまま表示される すべての記事の下にお問い合わせフォームを表示したい場合、個別記事テンプレート（single.phpなど）のthe_contentの下あたりに、おなじみのContact Form 7のショートコードを入力することを

front-page.phpとhome.phpは、どちらもトップページのテンプレートとして使用可能なファイルですが、両方とも含まれているテーマも少なくありません。では、2つのテンプレートは、いつ、どのようなタイミングで使われるのでしょうか。 front-page.php／home.php／index.phpの関係は？ ここでは、front-page.php、home.php、index.phpがトップページのテンプレートとして使われるタイミングを紹介します。 トップページはfront-page.phpが最優先 使用中のテーマにfront-page.phpが存在する場合は、トップページの表示レイアウトにはfront-page.phpが使われます。 front-page.phpとhome.phpの両方が含まれる場合でも、トップページのテンプレートとしてはfront-page.phpが優先されま

WordPressに限りませんが次のようなdivブロックを中央寄せしたいこともあります。 <div class="center-block"> 個別指導のWordPress講座です。 銀座またはスカイプで受講できます。 </div> 一般的には左寄せで表示されます。 左寄せのブロック（中央寄せにしたい） このブロックを中央寄せするCSSとして「margin: 0 auto;」が有名ですが、うまくいかないこともあります。その原因と対策を紹介します。 原因1：ブロック幅が広すぎる このブロックを中央寄せしたいので、次のようなCSSを記述します。 .center-block { margin: 0 auto; } このCSSでは、おそらくうまくいきません。 中央寄せがうまくいかない 原因はブロックの幅です。現在のブロック幅を確認するため、CSSに枠線（border）を付けてみましょう。 .cen

受講するコースを選択する（ラジオボタン：択一式） 追加オプションを選択する（チェックボックス） それぞれの料金を合計して表示する 以下、手順を紹介します。 新規フォームの作成 「Forms」メニューを開き、「New Form Title:」にフォーム名（例：見積もりフォーム）を入力します。 フォーム名の入力 画面下の「Save」ボタンをクリックすると保存されます。 続いて、見積もりフォームに必要な項目を追加します。 コース選択（ラジオボタン）の作成 画面左側のフォーム要素を右側にドラッグアンドドロップしてフォームを組み立てます。ここでは、コースを選ぶためのラジオボタンを使います。 コース選択に使うラジオボタンをドラッグアンドドロップ 開いた画面でタイトル(1)とID(2)を入力します。IDは料金計算に使うので固有の名前をアルファベットで入力しておきましょう。個々の選択肢(3)と料金(4)も

多くのWordPressテーマではページナビゲーションが組み込まれているので基本的には「ページナビゲーションを組み込みたい！」で大騒ぎすることもありませんが、問題はブログの一覧表示を自作したときです。 固定ページの中でブログ記事などを一覧表示しようと思ってWP_Queryを使ってコードを作成したときに、後から「ページナビゲーションが付いていない」ということはよくあります。 そんなときはWP-PageNaviプラグインが役立ちます。たとえば、次のようなページナビゲーションを表示することができます。 WP-PageNaviによるページナビゲーション ただし、WP_QueryとWP-PageNaviプラグインの連携方法を理解していないと、単純にプラグインの公式サイトで提示されたコードをテンプレートに入力してもページナビゲーションは表示されません。 ここでは、WP_Queryを使って自力で作成した

WordPressに限りませんが、ページの本文の文字サイズを大きくしたり、小さくしたくなることがあります。クリックすると文字サイズが切り替わる「大」「中」「小」ボタンが定番です。 クリックすると文字サイズが切り替わるボタン jQuery Text Resizerを使うと、このような「大」「中」「小」ボタンを作成することができます。また、jQuery Cookieと合わせて使うことで、ページを移動しても文字サイズの設定が保持されたままになり便利です。以下、「大」「中」「小」ボタンの作り方を説明します。 jQueryライブラリのダウンロード 以下のサイトよりjQuery Text ResizerとjQuery Cookieをダウンロードします。 GitHub - mariojvargas/jquery-textresizer --- 文字サイズを変更するライブラリ 上記のURLから「Code」

サイトURLの変更 WordPressのダッシュボードの「設定」‐「一般」メニューで「WordPressアドレス」および「サイトアドレス」を変更します。ここではインストール先のフォルダ名「aaaaa」を「bbbbb」に変更します。 フォルダ名（ホームページのアドレス）を変更 「変更を保存」ボタンをクリックすると、「Not Found」のエラー画面が表示されますが心配は不要です。 エラー画面が表示されても大丈夫 上記のメニューで設定した新たなフォルダが存在しないという意味なので、続けてフォルダ名を変更していきます。 フォルダ名の変更 FTPソフトウェアやFTPツール（例：さくらインターネットやエックスサーバーのファイルマネージャ・ロリポップのロリポップ！FTP）を使ってフォルダ名を変更します。以下はさくらインターネットのファイルマネージャの例ですが、他のツールでも考え方は同じです。 ファイル

WordPressで予約フォームを作るにはさまざまな手段がありますが、この記事では、問い合わせフォームを作るプラグインとして定番のContact Form 7を使って予約フォームを作成する方法を紹介します。ダブルブッキングの制御はしていないので、あくまで簡易的なシステムですが、参考にしてください。 完成イメージは次のようになります。 Contact Form 7で作る予約フォームの完成例 ゼロからの作成指導やカスタマイズをご希望の場合はWordPress個別サポートで承ります。 ダブルブッキングも制御できる予約システムを作りたい場合は以下のページも参考にしてください。MTS Simple Booking Cというプラグインで作成します。 WordPressで予約システムを作る方法 プラグインのインストール 「プラグイン」‐「新規追加」メニューから必要なプラグインを2つインストールします。ま

WordPressで作成中のサイトで「トップページだけタイトルを消したい」とか、「固定ページのサイドバーを消したい」など、ページごとにデザインやレイアウトを変えたいことはありませんか？ そんなときはページのbodyタグを見てみましょう。 bodyタグを見ればページが特定できる 次のように長いclass名が付いているはずです。 <body class="home page page-id-132 page-template-default…略…"> 「home」がトップページだということを示しています。「page」は固定ページ、「page-id-132」はページ番号（post id）が132番のページだという意味です。 このように、各ページのbodyタグには、そのページを識別するさまざまなclass名が付加されています。その規則性を活かして「トップページだけ」や「アーカイブページだけ」などの

ビジュアルエディタで入力した文章を改行するときはEnterキーを押したり、Shiftキーを押しながらEnterキーを押すと思います。見た目のイメージでは1行空くか空かないかの違いですが、実際は1行空いているわけではありません。 Enterキーを押した後は1行空いているように「見えるだけ」 その仕組みを理解すれば、ビジュアルエディタの使用中に起きるトラブルの解決にも役立ちます。以下、簡単に説明します。 ビジュアルエディタの改行イメージ まずは、ビジュアルエディタで文章を入力した後にEnterキーやShiftキーを押して改行したときの見え方を確認しましょう。 ShiftキーとEnterキーを同時に押すと改行される ビジュアルエディタで入力した文章を改行するには、Shiftキーを押しながらEnterキーを押します。 Shift＋Enterキーで改行される Enterキーだけを押すと1行空く Sh

WordPressに慣れてくると気づくのが「CSSを使えば自由にデザインをカスタマイズできる」ということです。たとえば、「グローバルメニューを画像に置き換えたい」も、CSSをカスタマイズして実現することができます。 メニュー項目の画像置き換えもCSSカスタマイズで可能 CSSカスタマイズの手法はさまざまですが、テーマのstyle.cssを開いて修正する方法は効率的ではありません。 なぜなら、修正したいデザイン（スタイル）はテーマのstyle.cssに書かれているとは限らないからです。複数のCSSファイルを持つテーマもありますし、プラグインのCSSが反映されている場合もあります。 ページのデザインをカスタマイズしたい場合、テーマのCSSを開いて修正するのではなく、現在表示中のページに適用されているCSSを知ることが重要です。そのCSSを何らかの形で上書きしなければ、いつまでたっても「自分で作

WordPressで作成できる2種類のページが「投稿」と「固定ページ」です。 ブログ記事は「投稿」で書いて、会社概要やサービス紹介などのページは「固定ページ」で作るのが一般的な使い方ですが、ある程度作成した後で投稿と固定ページを変換したいと思うこともあります。 投稿をまとめて固定ページに変換したい 投稿を固定ページに変換したり、固定ページを投稿に変換するにはそれぞれの内容をコピーペーストすれば良さそうですが、ページ数によっては限界もあります。 そこで、プラグインを使って「投稿」と「固定ページ」を変換する方法を紹介します。 投稿を固定ページに変換する pTypeConverterプラグインを使うと、作成済みの投稿と固定ページを変換（投稿を固定ページに、または、固定ページを投稿に）することができます。 まずは、「プラグイン」‐「新規追加」メニューからpTypeConverterプラグインをイン

定義していない変数の値をechoなどで表示しようとすると表示されるエラーメッセージです。たとえば、スクリプトの先頭で「echo $a;」と記述すると表示されます。次のようなコードです。 <?php echo $a; これは$aという変数を定義していないのに表示しようとしたためです。 ただし、このエラーはスクリプトの動作が止まってしまうほど重大ではないので、とりあえず非表示にすれば解決するケースがほとんどです。 具体的には.htaccessに次のように記述するのが最も簡単です。 php_value error_reporting 0 これにより、.htaccessを配置したディレクトリ（サブディレクトリ含む）以下のPHPスクリプトでNoticeエラーが表示されなくなります。 上記の設定では全てのエラーが非表示になりますが、Noticeエラーのみを非表示にしたい場合は、次の記事を参考にしてくだ

テーマをカスタマイズする場合、子テーマを作成してstyle.cssにオリジナルのCSSを入力するのが一般的ですが、入力したCSSが反映されない場合もあります。その原因はさまざまですが、Stinger5のケースで説明します。 「カスタマイズは子テーマのstyle.cssで」が機能する条件 テーマをカスタマイズするときは子テーマのstyle.cssにCSSを入力すれば良いというのは、最後に読み込まれるスタイルシートが子テーマのstyle.cssだというのが前提になっています。 稼働中のWordPressではいくつかのスタイルシートが読み込まれてさまざまなスタイルが適用されます。最後に子テーマのstyle.cssを読み込むことで最終的にそれらのスタイルを上書きできるということです。 逆に言えば、子テーマのstyle.cssの後にCSSが記述されている場合、スタイルを子テーマのstyle.cssに

ホームページに表を入れることもありますが、次のような横長の表になることもあります。PCでは普通に表示されるので違和感はないかもしれませんが、問題はスマホ表示です。 よくある横長の表（PCでは問題ない） 参考までに、使用したHTMLは次のとおりです。 <table id="table01"> <tbody> <tr> <th>コース名</th> <th>開催日</th> <th>時間</th> <th>基本料金</th> <th>担当講師</th> <th>教室</th> </tr> <tr> <td>ホームページ作成講座</td> <td>月曜日～金曜日</td> <td>3時間</td> <td>6,000円</td> <td>西沢直木</td> <td>新宿</td> </tr> <tr> <td>SEO講座</td> <td>土曜日・日曜日</td> <td>1時間</td> <td

WordPressのプラグインは膨大に存在するため、どれを使えば良いかわからないという声を聞きます。そこで定番のWordPressプラグインをまとめておきます。すべてが必須プラグインではありませんが、「こんなパーツや機能を作りたい」を実現できそうなものがあれば活用してください。目次が長くなりました。すいません。 投稿やページの表示 記事を一覧表示する（新着・カテゴリー指定など） 【プラグイン名】List category posts 【用途】固定ページの中で最新の投稿を一覧表示したいときに役立ちます。 【設定】[catlist]というショートコードを入力して投稿を一覧表示できます。詳しいオプションは、以下のページをご覧ください。 List category postsのショートコードの使い方 記事を簡単に一覧できるList category postsのショートコードサンプル 最新記事の一

WordPressのログイン画面には次のようなロゴ画像が表示されます。企業サイトや不特定多数のユーザーに何らかのサービスを提供する場合はロゴ画像を変更したいこともあります。 WordPressのログイン画面 ロゴ画像の変更方法を含めて、以下のページで説明されているので試しながら紹介していきます。 ▼Customizing the Login Form http://codex.wordpress.org/Customizing_the_Login_Form ロゴを変更するには、CSSの「background-image」を使って背景画像を入れ替えれば良いのですが、ログイン画面ではテーマのstyle.cssが読み込まれていないので工夫が必要です。 この場合、styleタグを使って任意のCSSをheadタグに差し込むようなコードをfunctions.phpに入力すれば解決です。ロゴ画像を変更す

好きな固定ページの一覧をグリッドレイアウトで表示したり、いくつかの画像や文章を2列、3列で表示したい場合、「WP Canvas - Shortcodes」プラグインが役立ちます。手作業で作ると面倒なグリッドレイアウトをショートコードで制御できるので、非常に便利です。 WP Canvasプラグインで作成できるグリッドレイアウト 以下、「WP Canvas - Shortcodes」プラグインを使って固定ページをグリッドにレイアウトする方法を紹介します。 固定ページ一覧をグリッドレイアウトで表示 固定ページの一覧をグリッドレイアウトで表示すれば、サービス関連のページなどをスッキリと効率的に見せることができます。 固定ページの一覧をグリッド形式でレイアウトする グリッド表示には「Posts」メニューを使います。 固定ページや投稿のグリッド表示 「Posts」メニューでは、グリッドのレイアウトスタ

問い合わせフォームの入力を効率化する定番テクニックといえば、「郵便番号から住所を自動で入力する」です。WordPressでもzipaddr-jpプラグインを使えば、Contact Form 7などで作成したメールフォームで入力した郵便番号から住所（都道府県や市町村）を自動で入力することができます。 郵便番号から住所を自動入力 以下、Contact Form 7の問い合わせフォームを例に、zipaddr-jpプラグインを使って郵便番号から住所を自動入力する方法を紹介します。 zipaddr-jpプラグインのインストール 「プラグイン」‐「新規追加」メニューからzipaddr-jpプラグインをインストール、有効化します。 zipaddr-jpプラグインのインストール 「設定」‐「zipaddr-jp」メニューで動作設定できますが、ひとまず初期設定のまま進めます。 zipaddr-jpプラグイン