WordPress

独自のカスタムフィールドを作成できる！Advanced Custom Fieldsの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を解説している記事です。Advanced Custom Fieldsという独自のカスタムフィールドを作成することができるプラグインの説明をしています。オリジナルの投稿機能を加えたいという人にはおすすめです。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

監修してくれたメンター

nakamoto

アジマッチ有限会社代表取締役社長。書籍化歓迎。対応業務：PHP(Laravel)、機械学習、Vue.js、LAMP・AWS、越境EC、CTO、エンジニア採用、CTO、経営者の不安解決コンサルティング。

今回は、WordPressで「Advanced Custom Fields」プラグインを使用する方法を解説します。

WordPressでは、記事投稿の際に「カスタムフィールド」と呼ばれる追加のデータを設定することができるようになっています。

プラグイン「Advanced Custom Fields」を使うと、さらに細かい設定が可能なカスタムフィールドを独自に作成することができます。

Advanced Custom Fieldsとは

Advanced Custom FieldsとはWordPressに任意の情報を紐付ける機能です。

もともとWordPressはブログシステムとして構築されました。

非常に便利なシステムだったのでブログ以外にも利用されるようになりました。

利用される中でタイトルや本文といったブログフィールド以外のフィールドが、ユーザーごとに必要になりました。

Advanced Custom Fieldsを利用することで、これらの任意情報を新たなフィールドとして構築し、WordPressのデータと紐付けて使うことが可能になります。

Advanced Custom Fieldsプラグインのインストール方法

ここでは、Advanced Custom Fieldsプラグインのインストール方法を解説します。

WordPressの管理画面にあるメニューから「プラグイン」をクリックして、「新規追加」をクリックします。

右上の検索フォームで「Advanced Custom Fields」を検索して、「インストール」をクリックして「有効化」をクリックするとインストールが完了します。

インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

[PR] Webサイト制作で副業する方法とは

フィールドグループを作成・設定する

WordPress管理画面の左メニューから「カスタムフィールド」→「カスタムフィールド」を選択します。

acf_p_1

「新規追加」をクリックします。

acf_p_2

「フィールドグループを新規追加」の画面が表示されます。

フィールドグループに名前を入力し、「フィールドを追加」をクリックします。

acf_p_3

「フィールドラベル」に入力された項目は記事作成画面で投稿者に表示されます。

この項目に関する分かりやすい名前を入力します。

「フィールド名」でこのカスタムフィールドのフィールド名を設定します。

※「フィールド名」は「テーマの編集」でコードを追加する際に値として使用するため、半角英数字で入力します。

(「フィールドラベル」で日本語を入力した場合同じものがここに自動でコピーされますが、それも消しておきます)

今回は画像のフィールドとテキストのフィールドをひとつずつ作成してみます。

まずここでは「フィールドタイプ」から「画像」を選択します。

「フィールド記入のヒント」は「フィールドラベル」同様記事作成時に投稿者に表示される項目です。

管理者以外の人が利用する場合などに向けて分かりやすい説明を入力しておきます。

(特に必要がない場合は空欄のままでOKです)

返り値の値は今回は「画像ID」を選択しています。

ここで選択した項目によって後で挿入するコードの内容が変わります。

acf_p_5

「フィールドを閉じる」をクリックするとそのフィールドの設定画面が閉じられます。

複数のフィールドを編集する時に便利です。

さらにフィールドを追加したい場合はここでまた「フィールドを追加」をクリックします。

acf_p_6

先ほどと同様に「フィールドラベル」と「フィールド名」を設定します。

今回はテキストのフィールドを作成するので「フィールドタイプ」から「テキスト」を選択しました。

acf_p_7

すべての設定が完了したら右上の「公開」をクリックします。

acf_p_8

記事作成画面を見ると本文とは別に、先ほど作成した「画像」と「テキスト」を入力する項目が追加されていることが確認できます。

acf_p_9

「テーマの編集」からコードを追加する

次に、この新規フィールドで入力した項目がサイトに反映されるように「外観」→「テーマの編集」から指定されたコードを挿入します。

acf_p_10

単一記事の投稿 (single.php)を編集します。

コードを挿入する箇所はテーマによって異なります。

今回は「SoSimple」テーマの以下の場所にコードを追加しています。

※各フィールドを使用する際のテンプレートはAdvanced Custom Fields公式サイトの「Documentation」→「Field Types」で表記されています。

https://www.advancedcustomfields.com/resources/

また、ここで先ほど設定した「フィールド名」を使用します。

例えば、テキストの場合は

<h2><?php the_field('text'); ?></h2>

のtextの部分が「フィールド名」になります。

acf_p_11

実際にカスタムフィールドがサイトで表示されるかを確認します。

投稿画面から画像とテキストを追加し、記事を公開します。

acf_p_12

acf_p_13

入力した項目がサイトに反映されました。

カスタムフィールドの表示場所は、「テーマの編集」でコードを挿入した場所によって変わります。

acf_p_14

このようにカスタマイズすることができました。

まとめ

Advanced Custom Fieldsを利用することで、WordPressでブログ以外のフィールドをカスタマイズすることができました。

同じ表現いろんなページで使いたい場合などにも、Advanced Custom Fieldsで登録しておくと、使い回しができて便利でした。

初心者でも簡単に設定できるので、ぜひ試してみてください。

ぜひ、WordPressの使い方を覚えましょう！

見栄えいいですね〜。同じ記事でも工夫次第で印象が違いますね〜。

そうだね。カスタムフィールドは色々工夫できるから、場面によって色々工夫してみるといいよ。

はい！ありがとうございました！！！

WordPressを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい
副業や転職後の「現場で使える」知識やスキルを身につけたい

WordPressでのサイト制作を学習していて、このように思ったことはありませんか？

テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。

まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

WPtouchの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。今回は、WordPressでスマートフォンサイトに対応させるプラグイン、WPtou...

WordPress

【入門編！】WordPressを学習する上でおすすめの本10選

WordPressを使ってサイトを公開するとなると結構大変なことが多かったりします。実際、サイトを公開できず挫折してしまったことのある人は多いのではない...

WordPress

WordPressで記事を投稿する方法【超初心者向け】

WordPressをとりあえずインストールしたという初心者向けの記事です。まずは基礎中の基礎である、記事を投稿する方法を覚えましょう。 ...

WordPress

WordPressを最新版にアップグレードする方法【初心者向け】

WordPressの管理画面にログインすると、更新を促すような表示がされているのを見たことはないでしょうか？今回は、そんなWordP...

WordPress

WordPressでイベントカレンダーを追加できるプラグイン4選【初心者向け】現役エンジニアが解説

WordPressにはイベントカレンダーを追加できる便利なプラグインがあります。店舗サイトなどを運営している場合は特に、簡単にイベントカレンダーを追加で...

WordPress

WP-PostViewsの使い方ーWordPressプラグイン【初心者向け】

よくサイトのサイドメニューに人気記事やその閲覧数を見ることがありますよね。自分で実装しようとすると大変ですが、簡単に実現してくれるプラグインがあるのです...

WordPress

あわせてよく読まれている記事

WordPressでカスタムフィールドを設定する方法【初心者向け】

WordPressには便利な機能としてカスタムフィールドがあります。そのカスタムフィールドについて初心者向けに設定方法を紹介します。カスタムフィールドの設定は、初心者にとっては難しいところもあるので、プラグインを使った方法もあわせて解説していきます。目次Advanced Custom FieldsとはAdvanced Custom Fieldsプラグインのインストール方法フィールドグループを作成・設定する「テーマの編集」からコードを追加するまとめWordPressを学習中の方へ大石ゆかり田島メンター！！WordPressのカスタムフィールドってなんですか？田島悠介カスタムフィールドっていうのはね、記事を書くときのフォーマットを自分用にカスタマイズできる機能なんだ。カスタムフィールドとは WordPressの投稿フォームには、デフォルトで「タイトル」と「本文」の2つがあります。ここに入力する情報を追加できるのがカスタムフィールドです。例えば、不動産サイトのようにたくさんの情報を扱うサイト飲食店紹介など、決まったフォームで記事を書きたいブログなどを構築する時に、デフォルトの機能ではお店の情報などを定型的に表示することができず不十分です。そこで便利なのが、「カスタムフィールド」です。カスタムフィールドを使うと「タイトル」と「本文」だけでなく、自分好みの任意フォームを追加できます。カスタムフィールドを使えば、あとで「評価が高い順番に並べ替える」といったことも柔軟に行えるようになります。カスタムフィールドを使うメリットカスタムフィールドを使う主なメリットは、主に以下の４つがあります。決まった項目の入力データが扱いやすいスタイル（CSS）を管理しやすい入力データを値として扱うことでデータの表現性が上がる入力忘れを防げるこれら４つのメリットと利用例を記載します。決まった項目の入力データが扱いやすい例えばワインを毎日紹介しているサイトがあった場合、その定価は文章中に入れてしまうよりも、カスタムフィールドで入れておくと、あとで価格順に並べてみたり、年間の合計金額を算出するようなことが簡単にできます。スタイル（CSS）を管理しやすいフィールドには特定のクラスを付加することで、一括してスタイルの管理ができます。入力データを値として扱うことでデータの表現性が上がる文章の中に書くと、たとえば価格などは文字列と扱われてしまいますが、フィールドで入力したデータは数値として扱うことができます。そのため後処理などで様々に加工してから出力することが可能になります。入力忘れを防げる入力フィールドが決められていることで、必須項目などの記載漏れを減らすことができます。 [PR] Webサイト制作で副業する方法とはカスタムフィールドを表示させる方法それでは早速カスタムフィールドを表示させる方法を紹介します。デフォルトままでは表示されていないので、まずページ右上の３点リーダー「⋮」をクリックします。右下の最下段に「設定」がありますので、そちらをクリックします。設定画面の左側で「パネル」をクリックし、さらに最下段の「カスタムフィールド」のスイッチをオンにします。そして表示された「有効化してリロード」をクリックします。すると、投稿本文の下に、カスタムフィールドが表示されます。カスタムフィールドの編集はここで行うことになります。任意の項目を追加すると、次回以降はプルダウンから選択することができます。この表示までは簡単にできました。ただし、カスタムフィールドはとても便利な入力補助ですが、実はこのフィールドに入力、記事を更新しただけでは記事に出力されません。出力するためには、テーマを直接編集する必要があります。大石ゆかりカスタムフィールドについてはわかったんですけど、もう少し手軽に扱うことってできないですか〜？田島悠介プラグインを使うと手軽に使えるよ。そこで今回は初心者の方でも負担・ミスなくカスタムフィールドを活用するためのプラグインを紹介します。カスタムフィールドが使えるプラグインカスタムフィールドが使えるプラグインはいくつかありますが、今回は「Custom Field Template」を紹介します。プラグインのインストールまずは、Custom Field Templateをインストールしましょう。やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。インストールが完了すると、管理画面＞設定＞カスタムフィールドテンプレートにプラグインが表示されます。カスタムフィールドテンプレートの設定プラグインからカスタムフィールドの設定を行います。たくさん入力項目があるように見えますが、最低限設定すべきなのは2つです。まずは2つを登録しておきましょう。 1.カスタムフィールドテンプレートオプション（1番目） ※入力フォームの登録 2.[cft] and [cftsearch] ShortCode Format（4番目） ※表示テンプレートの登録今回はカフェブログを作るという想定で、1つずつ紹介していきます。入力フォームの登録「テンプレートタイトル」と「テンプレートコンテンツ」に入力します。記述ルールはシンプルで、 [ID]　：カスタムフィールドのID type　：カスタムフィールドの種類（＋サイズ） label　：投稿画面で表示されるテキスト（※全角などの注意事項）という３行で記述されています。また、typeで使えるものとしては、 text：一行のテキストフィールド textarea：複数行のフィールド file：画像のアップロードなどがあります。チェックボックスやラジオボタンも利用できます。なお今回、テストで記入したコンテンツは下記のとおりです。＝＝＝＝＝＝＝＝＝＝＝＝ [お店名前] type = text size = 35 [感想] type =textarea [評価] type = checkbox value = ★★★★★ # ★★★★☆# ★★★☆☆# ★★☆☆☆# ★☆☆☆☆ label = ※５段階評価 [住所] type = text size = 35 ＝＝＝＝＝＝＝＝＝＝＝表示テンプレートの登録 [cft] and [cftsearch] ShortCode Formatに、タグなどを使って表示させたいテンプレートを作成します。この時に「PHPを使用する」にチェックを入れるとPHPが使用できます。ここで[お店名前]のように、テンプレートのコードを書くと引用されます。カスタムフィールドテンプレートを使った記事投稿投稿画面を開くと、「本文」の下にカスタムフィールドの項目が表示されています。ここに、表示項目にそってコンテンツを入力します。そして、本文中のカスタムフィールドを挿入したい場所にショートコード[cft format=0]を入力します。（※=の後の数字が、テンプレートの番号と対応しています）入力が完了すると、このように表示されました。カスタムフィールドの設定は以上です。他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。ぜひ活用してみてください。大石ゆかり同じフォーマットの記事をたくさん書くときには、カスタムフィールドは欠かせないですね！田島悠介そうだね。記事を書くスピードも早くなるし、何人かで書くときなんかにも同じように書けるのがいいね！大石ゆかりそうですね♪ まとめ今回はカスタムフィールドについて次の４つの内容でご紹介しました。カスタムフィールドとはカスタムフィールドを使うメリットカスタムフィールドを表示させる方法カスタムフィールドが使えるプラグイン最初は難しく感じるかもしれませんが、慣れてくると応用範囲が広い機能ですので、是非使いこなしてみてください。 WordPressを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

WordPress

WordPressの使い方！初心者でもサイト作成が簡単に｜現役エンジニアが解説

WordPressを使用するとデザインの変更や機能のカスタマイズ、データの管理を手軽に行える多機能なブログサービスを作成することができます。実際、このTechAcademyマガジンもWordPressを使って作られたサイトです。他にも企業のコーポレートサイトやブログサイトなどの多くはWordPressを使われているのです。サイト作成に便利なプラットフォームなので、ぜひ使えるように理解していきましょう。そもそもWordPressとは何なのかよく分からない方は、今さら聞けない！WordPressとは【初心者向け】をご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。大石ゆかり田島メンター！！WordPressのことはなんとかわかったんですけど、どうやって使うんですか〜？田島悠介 WordPressを使うにはインストールや初期設定が必要なんだ。大石ゆかりなんだか難しそうですね・・・。田島悠介きちんと手順に従えば簡単にできるよ。インストールさえしてしまえば、簡単に記事の作成とかサイトデザインとかもできるから。それじゃあ教えてあげるね。大石ゆかりよろしくお願いします！！！目次 WordPressのインストール手順初期設定とインストール WordPress管理画面の基本設定記事の投稿方法カテゴリーとタグの管理ユーザー管理パーマリンクの設定テーマの使い方プラグインの使い方 WordPressで知っておきたいその他の設定 WordPressのインストール手順用意するもの PHP・MySQLが使用できるサーバー(レンタルサーバーなど) 以下の条件があります。 PHP バージョン 7.4 以上 MySQL バージョン 5.6 以上または MariaDB バージョン 10.1 以上 HTTPS対応 (2020年6月時点) FTPクライアント(今回はFileZillaを使用します) 独自ドメイン(yahoo.co.jpのように自分のサイトを公開する場合に必要です) 独自ドメイン、レンタルサーバーについては別途記事内で比較しています。合わせてご覧ください。本体の入手とサーバーへのアップロードまずはWordPressの公式サイトのダウンロードページにアクセスしましょう。 WordPress – ダウンロード以下のボタンをクリックしてWordPress本体をダウンロードします。ダウンロードし、解凍した「wordpress」という名前のフォルダを任意の半角英数字の名前に変更します。ここではwpとしています。(変更せず、「wordpress」のままでもOKです) FTPクライアントを使用してサーバーに本体をアップロードします。今回はFileZillaを使用します。サーバーに接続し、WordPressを設置したい場所にフォルダごとアップロードします。アップロードしたフォルダのある場所にアクセスします。※ ※例えばhttp://xxxx.ne.jp/に「wp」と名前変更したWordPressフォルダをアップロードした場合、アクセスする場所はhttp://xxxx.ne.jp/wpとなります。また、これがそのサイトのアドレスになります。 [PR] Webサイト制作で副業する方法とは初期設定とインストールデータベースの設定を行います。「さあ、始めましょう！」のボタンをクリックします。データベース名・ユーザー名・パスワード・データベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。以下は、レンタルサーバーのスターサーバーでの例です。(管理画面の「データベース設定」から見ることができます) パスワードはこのデータベースで設定したものを入力します。また、データベースの文字コードは「UTF-8」にしておきます。「インストールを実行」をクリックします。ここではWordPressサイトの基本的な設定を行います。また、これらの項目は全て後でいつでも変更できます。「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとサイトが検索エンジンに表示されない状態にしておくことができます。テスト導入時などにチェックします。入力後「WordPressをインストール」をクリックします。インストール完了のメッセージと、ログイン用のユーザー名とパスワードに関する情報が表示されます。続いてログイン画面が表示されます。設定したユーザー名とパスワードを入力し「ログイン」をクリックします。管理画面の基本設定ログインするとWordPressの管理画面が表示されます。記事の投稿やサイトデザインの変更、プラグインの追加や各種設定はこの画面から行います。サイトの基本情報変更左メニューの「外観」から「カスタマイズ」を選択します。「サイト基本情報」を選択します。サイトのタイトルとキャッチフレーズはここからいつでも変更できます。ログイン・ログアウト方法管理画面からログアウトする場合は上メニューのユーザー名から「ログアウト」を選択します。再び管理画面にログインするときはサイト上の「ログイン」(テーマにより表示されないものもあります)か、WordPressフォルダ内にあるwp-login.phpにアクセスすることでログイン画面に移行することができます。※ ※例えばhttp://xxxx.ne.jp/wpというサイトの場合はhttp://xxxx.ne.jp/wp/wp-login.phpがログイン画面へのアクセスになります。記事の投稿左メニューの「投稿」から「新規追加」を選択します。「タイトルを追加」の部分にタイトル、「文章を入力、または…」の欄に本文を入力します。なお、WordPressではバージョン5.0からエディタが「ブロックエディター」に変更になっています。この記事でもブロックエディターの説明を行っています。また、/ を入力するか、+ボタンを押すことで画像などのコンテンツを挿入することができます。入力が完了したら「公開」ボタンをクリックすると記事がサイトに反映されます。予約投稿の方法「公開」ボタンを押せば、その瞬間記事として公開されますが、中には決まった時間に公開したいと思う人も多くいるでしょう。公開ボタンを押した画面の下に表示されている「公開：今すぐ」をクリックします。カレンダーが表示され、日時を自由に決めることができます。トップページには出したくないから過去の記事として公開したい、明日の9時に公開したいので、予約投稿にする際に便利です。今より先の時間に設定すると、「公開」から「予約投稿」というボタン名に変わります。設定した時間になったら自動的に公開されるので、時間に合わせて手動で公開する必要がなく便利な機能でしょう。カテゴリとタグの管理 WordPressでは投稿した記事を分類するために、カテゴリーやタグを利用することが出来ます。一般的に、カテゴリーは、記事を大まかにグループ分けする場合に使われ、タグはさらに細かく分ける場合に用いられています。 WordPressで投稿する記事は、必ずカテゴリーを選択しなければなりませんが、タグは必ずしも設定しなくてもよいことになっています。新規カテゴリーの作成方法ログインした後、「投稿」から「カテゴリー」を選択すると、カテゴリー新規追加、既存のカテゴリー編集の画面が開きます。名前にカテゴリー名を書いて、下のほうにある新規カテゴリーを追加ボタンを押すと、新規カテゴリーが追加されます。スラッグというのは、カテゴリーのアドレスにつける別名みたいなものです。スラッグを設定しない状態で、未分類のカテゴリー一覧の記事を表示した場合、アドレスが以下のようになります。 http://あなたのHPのURL/category/%E6%9C%AA%E5%88%86%E9%A1%9E/ ブラウザのURLを見てみると、 http://あなたのHPのURL/category/未分類/ と表示されていますがそれはブラウザが気を利かせて、日本語に変換してくれただけで、本当はURLエンコードされた日本語文字列になっています。コピーしてテキストエディタや掲示板などの入力欄に貼り付けるとわかります。未分類のカテゴリーに対して、not-categoryなどのスラッグをつけると「http://あなたのHPのURL/category/not-category/」でアクセスできるようになります。また、カテゴリーに親カテゴリーを指定することで、カテゴリーに階層構造を持たせることも出来ます。新規タグの作成方法ログインした後、「投稿」から「タグ」を選択すると、タグの新規追加、既存のカテゴリー編集の画面が開きます。タグもカテゴリーと同じで、スラッグを利用することが出来ます。タグは、記事投稿時に複数設定することが出来るので、該当するものを設定しましょう。ユーザー管理 WordPressでは、複数人で管理することも出来て、それぞれ権限を設定することでセキュリティを向上させることが出来ます。管理画面のユーザーをクリックすると、新規登録・編集画面になります。権限グループごとに何ができるのか新規追加の前に、権限について見ていきます。権限には以下の5種類のグループがあります。購読者 WordPressにログインすることが可能。プロフィールの変更が出来る寄稿者記事を投稿できる。ただし、編集者や管理者が許可しない限り公開状態には出来ません投稿者記事を投稿できるが、他のユーザーが作成した記事は扱えないことと、固定ページ作成は出来ない編集者他のユーザーが作成した記事や固定ページなども扱えるが、デザインやプラグインなどWordPressの設定に関わるものは扱えない管理者全ての権限があるとなっています。寄稿者は記事を投稿できるものの、公開状態にするには編集者以上の権限を持つユーザーの許可が必要。投稿者は、記事を投稿できるものの、カテゴリーなどの作成や管理権限が必要なもの、他のユーザーが作成した記事の編集は行えません。編集者は、ほとんど全ての作業が可能ですが、設定にかかわるものは変更できないです。管理ユーザーに権限を設定することで、複数人の管理人がいてもセキュリティが守られるようになっています。新規ユーザーの登録方法管理画面の「ユーザー」をクリックすると、登録されているユーザー一覧が表示されます。ページトップに「新規追加」ボタンがあるので、こちらをクリックしましょう。必要な情報を設定した後、権限を決めて追加ボタンを押すと追加できます。権限を間違えると、全ての記事が削除されてしまう恐れもあるので注意が必要です。ユーザーの削除方法管理者の権限を持つユーザーでログインすると、削除することが出来ます。パーマリンクの設定パーマリンクでは、記事ページなどのURLをカスタマイズすることができます。「設定」から「パーマリンク設定」でパーマリンクの編集を行うことができるので、確認してみましょう。 URLとは、通常であれば、ファイルの場所を示しています。例えば、URLが http://ほにゃらら.com/aisatsu/ohayou.html だった場合「aisatsu」というフォルダの中の「ohayou.html」というファイルの情報が返されます。ところがWebサーバーの設定でこれを変更することが出来ます。WordPressのインストール先のフォルダに.htaccessファイルがあります。中身について詳細は解説しませんが、要求したファイルやフォルダがない場合、全てのアクセスを「index.php」というファイルに集める、という設定になっています。index.phpにアクセスを集めて、ブラウザのアドレスから判断して、プログラムでデータベースから検索して結果を表示しています。 WordPressのデフォルトの設定では、2020年6月24日に投稿した場合のURLは、 http://あなたのURL/2020/06/24/hello-world/ などのようになっています。この/2020/06/24/hello-world/の部分が、パーマリンクになります。デフォルトでは、日付と投稿名でデータベースから記事を取得しているようです。この部分をある程度自由に変更することが出来ます。パーマリンクの変更パーマリンクを変更した場合、どのようにURLが変わるのかを見てみます。パーマリンクの設定の変更画面は、管理画面から設定、パーマリンク設定をクリックします。デフォルトの状態は、日付と投稿名です。2020年の6月に投稿した記事であれば、 /2020/06/投稿した記事のタイトル/ というURLになります。基本に設定すると「/?p=123」という、記事に設定されている番号が付けられます。これはデータベース上で管理されている、その記事唯一の番号です。月と投稿名だと「/2020/06/投稿した記事のタイトル/」になります。数字ベースだと「/archives/123」といった形になります。投稿した記事のタイトルだけという設定もあり「/投稿した記事のタイトル/」というURLにすることも可能です。パーマリンクのカスタム構造パーマリンク設定では、自分でカスタマイズすることもできます。構造タグというものを使用します。詳しくは使い方を参照してください。カテゴリーベースを変更することも出来ます。カテゴリーベースのところを.(ドット)にすると「/category/カテゴリー名/」になるURLが「/カテゴリー名/」に短縮することも出来ます。ただし、その場合投稿記事のパーマリンクが「/記事のタイトル/」になっていた場合、重なる可能性があります。記事の投稿名がhello-worldで、カテゴリーにhello-worldがあった場合どうなるでしょうか？どちらも http://あなたのURL/hello-world/ でアクセスできてしまいます。この場合、投稿した記事が優先して表示されてしまい、カテゴリー一覧が表示されなくなるので注意が必要です。テーマ WordPressは「テーマ」という機能によりサイトのデザインを簡単に変更することができます。各種テーマは公式が作成したものやユーザーが公開しているものが使用できます。個人や企業でWordPressのテーマを作っているところも多いので、費用をかけなくても十分整ったサイトを作ることができるはずです。テーマの変更方法左メニューの「外観」から「テーマ」を選択します。インストール済みのテーマの一覧が表示されます。上の「新規追加」かテーマ一覧内の「新しいテーマを追加」をクリックします。テーマは新着や人気順から探せる他、右上の「テーマを検索」からキーワードを指定して見つけることができます。テーマをインストールし、一覧画面から「有効化」をクリックするとサイトに反映されます。テーマの例「WP Portfolio」テーマは、ポートフォリオ作成に適したテーマです。記事作成時にアイキャッチに指定した写真やイラストなどを一覧できるため作品を見せやすくなっています。おすすめのテーマ各シチュエーションで使えるWordPressのテーマを紹介します。国内ではブログサイトやコーポレートサイトをWordPressで利用している企業が多いですが、海外ではECサイトなどもテンプレートが用意されているので、ぜひ使ってみてください。以下では、ブログサイト、ECサイト、コーポレートサイトに分けてそれぞれ人気のテーマを紹介しています。ブログサイトアルバトロスかなり多くのブロガーが利用しているオープンケージのWordPressのテーマ。その中でも王道のアルバトロスをおすすめしたいと思います。有料ではありますが、技術的なスキルが全くない人でも簡単におしゃれなWebサイトを作れるのが大きな特徴です。カスタマイズもかなり自由に行えますし、一度買ってしまえばずっとサイトを運営できるので、多くのブロガーから人気なのでしょう。アルバトロス賢威 SEOに強いブログ・サイトを作りたい方におすすめのテーマです。ウェブライダーという様々な企業のSEOコンサルを担ってきた会社が開発を行っています。サイトのテーマだけでなく、SEOに関するマニュアルも載せているので、集客にも力を入れたい人にとっては一石二鳥なテーマになるはずです。賢威 Riba Lite 画像のサムネイルが大きくバックに表示されているタイプのサイトです。カメラでよく写真を撮ったり、トップページで写真を強調させたいときにおすすめのテーマです。ダウンロード / DEMO Hueman よく見るニュースサイトのような作りになっているテンプレートです。サイドメニューも充実しており、どこに何を置くか難しい技術を使わなくても選択するだけで設定することができます。個人のブログサイトとしても活用できるので、ぜひ活用してみてください。ダウンロード / DEMO ECサイト Shop Isle wordPressでECサイトを構築する際は、WooCommerceプラグインを使うのが定番です。WooCommereに特化したテーマの1つがShop Isleです。様々な効果を適用でき、ECサイトだけでなくビジネスサイトとしても活用できます。より高機能のPRO版も存在します。ダウンロード / DEMO YITH Proteo ファッションやアパレル系のECサイトにおすすめです。カテゴリも細かく設定できますし、洋服などを販売する際に写真にマウスオーバーすると他の写真も出てくるといった仕掛けもあります。スマホで見るとカートに入っているアイテム数、購入金額がトップで確認できるのでユーザーとしても使いやすいでしょう。ダウンロード / DEMO Fukasawa 白を基調としたデザインでより一層アイテムを引き立てるテンプレートでしょう。商品自体も白をバックに写真を撮っているので、シックな印象を与えますね。ブランディングとしての見せ方としても使えるのでおすすめです！ダウンロード / DEMO コーポレートサイト Zelle PRO WordPressのテンプレートの中でも非常に多機能で、出来ないことは無いんじゃないかというくらい多くのことを実現できるはずです。また、デザイン面でもスクロールすると横からフォームが出てくるパララックス仕様になっており、おしゃれにも見えるでしょう。ダウンロード / DEMO Sydney 画像がディスプレイいっぱいに表示されたインパクトの大きいテンプレートです。トップページに会社情報、事業内容、メンバー、SNSアカウント、ニュースなど多くの情報も載せられるのでスクロールしていて飽きが来ないでしょう。ダウンロード / DEMO 他にも初心者におすすめの無料で使えるWordPressのテーマを紹介しているので、合わせてご覧ください。プラグイン WordPressではプラグインという拡張機能を使うことによってサイトにさまざまなシステムを追加することができます。アクセス解析を行うものや問い合わせフォームを追加するもの、スライドショーを表示させるものなどさまざまなプラグインがあります。プラグインの検索とインストール左メニューの「プラグイン」から「新規追加」を選択します。テーマのときと同様に、新着順や人気順・キーワードでの検索でプラグインを探すことができます。「今すぐインストール」ボタンをクリックするとプラグインがWordPressにインストールされます。インストールされたらすぐに利用できるわけではなく、まず有効化をしなければなりません。プラグインの有効化左メニューの「プラグイン」から「インストール済みプラグイン」を選択します。インストールされているプラグインの一覧が表示されます。使用したいプラグインの「有効化」をクリックします。プラグインの例 SNSボタンのプラグイン「Social Media Feather | social media sharing」プラグインを使用すると、サイトの記事にFacebookやTwitterなどの共有用アイコンを追加することができます。利用するサービスやアイコンの大きさなども自由にカスタマイズが可能です。記事をシェアしてもらうためにもSNSボタンはぜひとも設置しておきましょう。記事編集で役立つプラグイン TinyMCE Advanced 記事作成をする前に必ず入れておきたいプラグインです。ビジュアルエディタに追加できる各機能を手軽に設定できます。 TinyMCE Advancedの使い方 WP Videos YouTubeやVimeoといった外部の動画を記事内に埋め込むことができるプラグインです。URLを入力するだけで追加できるので、簡単に設定できるはずです。 WP Videos SEO対策に役立つプラグイン All in One SEO Pack SEO対策全般の設定をまとめて行えるプラグインです。 FacebookやTwitterといったSNSとの連携、SEOにおいて欠かせないタイトルタグ・ディスクリプションタグの設定も行えるので、まず最初に入れておきましょう。 All in One SEO Packの使い方 Google XML Sitemaps XMLサイトマップを作成してGoogleに更新を通知させることができます。サイトマップがあることでサイトにどんなページが存在するのかGoogleに認識させることができるので、SEOの効果も見込めます。 Google

WordPress

今さら聞けない！WordPressとは【初心者向け】｜現役エンジニアが解説

WordPressをご存知でしょうか？最近ではホームページの制作をするときにも、よくWordPressを使う場面が多くなってきています。しかし、そもそもWordPressとは何か？と質問されたら説明するのは難しいものです。この記事では、WordPress初心者の方でも、そもそもWordPressとはどんなものであって、どんなメリットやデメリットがあるのかが分かるように解説したいと思います。ぜひ、WordPressの使い方を覚えましょう！なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！あのちょっと聞きたいことがあるんですけど〜田島悠介ん？何がわからないの？大石ゆかりあの、WordPressってなんですか？田島悠介あぁ、WordPressかー。WordPressはCMSと呼ばれるものの一つで、プログラミングなんかをしなくても簡単にサイトを作ることができるものだよ。大石ゆかり CMS、ですか。具体的にどういうことができるんですか？田島悠介それじゃあ１つずつ説明していくね。大石ゆかりはい♪お願いします！！！目次 WordPressとは WordPressが人気な理由 WordPressでできること WordPressでサイト運営する上で必要なもの WordPressで作られた実際のサイト WordPressの学習方法 WordPressと一緒に使うと便利なツール WordPress利用時の注意点そもそもWordPressとは何か WordPressとは、いわゆるコンテンツマネジメントシステム（CMS）というものです。簡単にいうと、「ホームページの制作ができない人でも、簡単にコンテンツを管理できる仕組み」ということです。通常、ホームページに新たに記事を追加しようとすると、HTMLという言語を勉強して、自分でコードと記事の文章を書いていかなくてはなりません。それがWordPressの場合は、HTMLのコードがわからなくても、マイクロソフトのワードに文章を書いたり写真を挿入したりする感覚で、記事やニュースを更新していくことができます。 [PR] Webサイト制作で副業する方法とはWordPressが人気な理由プログラミングができなくてもWebサイトが作れる上記したように専門知識なくしてWebサイトの管理等ができますが、ここでの専門知識とは主にプログラミングに関することです。特別な機能を持たせる開発をするような場合を除き、情報発信ができるようなメディア立ち上げをする場合にはWordPressそのものの操作に慣れるだけで作ることができるのです。通常自分でゼロから作成しようとすると「HTML」や「CSS」、そしてもう少し華やかさや簡単な機能を加えるには、「JavaScript」や「PHP」等も知っておくと有利になりますが、WordPressを使えば全くこれらの知識がなくとも作れてしまいます。無料であるなにより、無料でこれらのシステムを使えることによって未経験者にも敷居が下がり使用者の増加に繋がっています。しかしながら、インターネット上に公開するにはWordPressの利用とは別に、ドメインの取得やレンタルサーバーなどが必要となりこれらには当然費用が必要となります。 WordPressでできること画像引用元：https://unsplash.com/photos/tZc3vjPCk-Q それでは、具体的にWordPressのメリットとデメリットをご紹介します。 WordPressのメリット HTMLがわからなくても自分でニュースを追加、更新できる WordPressは記事更新の管理画面が、わかりやすいインターフェースで設計されています。そのため、直感的に記事の追加や編集、画像や動画の挿入が可能です。HTMLの知識は不要です。 Webサイトの構築が簡単もし自分でWordPressのサイトを立ち上げたいと思った時でも、各サーバー会社が予め”かんたんインストール”という設定をしてくれている場合がほとんどです。 WordPressはデータベースという、記事のデータが入った箱から、ページの読み込みごとにそのデータを取ってくるという動きをするのですが、これらデータベースの設定も自動でサーバー会社が行ってくれます。拡張性が高くてお手軽たとえば、お問い合わせフォームを設置したいというときにHTMLであればCGIやPHPというものを勉強する必要がありますが、WordPressの場合はそれが不要です。プラグインという便利な拡張機能が無料で、豊富に用意されているので、そのプラグインを”インストールする”ボタンを押すだけで実装できてしまいます。 WordPressのデメリット HTMLのサイトより表示スピードが遅い HTMLは、ページごとにコードを書いたファイルをサーバーに置いてあるだけなので、ページの表示スピードが早いです。それに比べてWordPressは、ページの表示ごとにデータベースから、ページを構成するパーツをその都度呼び出してページを構築するため、HTMLに比べると表示スピードがどうしても遅くなってしまいます。セキュリティの心配 WordPressはPHPというプログラミング言語でできている関係上、不正な操作や攻撃を受けやすいというデメリットがあります。例えばログイン画面に、IDとパスワードをランダムに超高速に試されることで、不正ログインされてしまう可能性もあります。そのため、WordPressのバージョンは常に最新にしておく必要があります。この点は、Windows(ウィンドウズ)などのパソコンと同じです。常にバージョンは最新のものを利用しましょう。実際に自分でWordPressを運営したいという方は、WordPressをインストールする方法をご覧ください。 WordPressでサイト運営する上で必要なもの画像引用元：https://unsplash.com/photos/gcsNOsPEXfs 独自ドメイン自分のサイトを公開するには、ドメインというものを取得する必要があります。有名なところで言うと「お名前.com」「ムームードメイン」などがあります。初心者でもすぐ使える！ドメインが取得できるサイト10選レンタルサーバー誰がアクセスしてもサイトを公開させるためにはサーバーが必要です。サーバーを自作する人もいますが、基本的にはレンタルサーバーを月額1000円程度で利用します。レンタルサーバー比較・10選【Webサイト制作の初心者におすすめ】を参考に選んでみてください。「ロリポップ」や「さくらのレンタルサーバー」は初心者の方にも人気です。 Webサイトのデザインテンプレートサイトの見た目を整形するデザインを用意する必要があります。 WordPressの管理画面上に用意されているものもありますが、無料で利用できるおしゃれなテーマも多いので、そちらがおすすめです。初心者におすすめ！無料で使えるWordPressのテーマ20選【日本語対応のみ】 WordPressで作られた実際のWebサイト画像引用元：https://unsplash.com/photos/OGOWDVLbMSc それでは、実際にWordPressで動いているサイトを6つほど紹介していきます。 AdverTimes(アドタイ) 宣伝会議の運営している広告や宣伝に関するメディアです。記事だけでなく、FacebookやInstagramの写真を載せることもできます。田中直染料店オンラインショップ機能を追加しているWordPressサイトです。商品登録を、お店のスタッフの方が追加更新できるようにしているものと思われます。浦和レッドダイヤモンズ公式サイトスポーツチームの公式ホームページでもWordPressが使われている例はいくつかあります。過去の試合結果などを溜めておくことも、WordPressであれば簡単に行えます。イルカ交通名古屋の交通会社のホームページ。ニュースの定期発信にWordPressを役立てています。渋谷教育学園渋谷中学高等学校学校の発信するニュースを、複数のカテゴリに分割して管理しています。 TechAcademy magazine 実は、このサイトもWordPressで作られています。こういった記事を発信していくようなサイトとの相性は非常にいいでしょう。 WordPressの学習方法画像引用元：https://unsplash.com/photos/QklJV_Q0Pig 人気が高く利用者も多いWordPressなので、その分学習環境も整えられています。本も多く出版されていて、また学習サイトに関しても無料で多くのサイトが公開されています。学習サイトドットインストールドットインストールではWordPressの基本的な操作方法から細かい構築手順まで幅広く学ぶことができます。ドットインストールバズ部こちらの特徴はWordPressの使い方全般に加えて、サイト構築後の集客等についてもまとめられているというところです。バズ部 Webクリエイターボックス WordPressにおけるポイントやコツなどが多く紹介されており、オリジナルテーマの作り方といった中級者以上に向けられた内容も学ぶことができます。 Webクリエイターボックス書籍いちばんやさしいWordPressの教本プログラミングスキルがなくてもパソコンやスマートフォンに対応したWebサイトの完成ができるように丁寧に解説されています。本格ビジネスサイトを作りながら学ぶ　WordPressの教科書こちらは初級的な内容から発展的なことまで含まれており、本格的に使おうとする人に向いています。 WordPressと一緒に使うと便利なツール画像引用元：https://unsplash.com/photos/hpjSkU2UYSU WordPressにはプラグインというツールを導入して機能を拡張することができます。よく使われているプラグインを紹介します。 WP Social Bookmarking Light SNSへのリンクボタンを追加できるプラグインです。現在ではWebサイトの投稿をSNSでシェアしたり、逆にSNSの投稿をWebサイトで引用したりということが当たり前に行われています。Webサイトを構築した際、早い段階で必要になるのがSNSへのリンク機能でしょう。このプラグインは各SNSの公式のボタンを使った表示ができるのが特徴です。 WP Social Bookmarking Light Table of Contents Plus 投稿ページが増えてくると、目次ページ（サイトマップ）が欲しくなります。このプラグインは、長い固定ページ内の目次のほか、サイト全体の目次ページ（サイトマップ）の作成も可能です。手作業で目次ページを作成するのと比較して圧倒的に容易ですので試してみるといいでしょう。 Table of Contents Plus Contact Form 7 Webサイトにお問い合わせフォームを追加するプラグインです。鉄板中の鉄板プラグインであり、とても多く利用されています。導入が容易であり、広く利用されていることから設定方法などの情報も多く得られることができます。 Contact Form 7 WP-PageNavi ページナビゲーションを行うプラグインです。このプラグインを導入することで、分かりやすいページ送り機能を実装することができます。とても多く利用されているプラグインの１つです。 WP-PageNavi All-in-One WP Migration WordPressで構築したWebサイトの移設を行うためのプラグインです。 Webサイトの設定や投稿などを全て１まとまりのファイルにエクスポートすることができます。 Webサイトをリニューアルする際に別環境にサイトのコピーを立ち上げたり、自分のパソコンでWordPressを動作させる場合など、幅広く活用できます。またサイトのバックアップを取得するツールとしても有用です。 All-in-One WP Migration なお、プラグインを導入すると、その分WordPressの動作も少しずつ遅くなります。プラグインの導入は必要なものに限定し、多用しないようにしましょう。 WordPressの利用時の注意点 WordPressは便利な反面、利用する際にいくつか注意点があります。画像引用元：https://unsplash.com/photos/iEiUITs149M ページ構成を考えておく WordPressは自由度が高いため、かなり複雑なWebサイトも構築可能です。そのためページ構成を考えずに適当にWebサイトを構築してしまうと、収集がつかなくなってしまいます。通常の記事で投稿するのか、固定ページと呼ばれるページで作成するのか、ページ間のナビゲーションはどうするか等、ページ構成を考えながらサイトを構築するといいでしょう。動画や画像を多用しない前述のとおり、WordPressには表示がやや遅いという弱点があります。また一般的にユーザーがWebサイトのページ読み込みを待てる時間は約3秒程度と言われています。特にWebサイトのトップページで容量の大きい画像や動画を貼り付けることは表示を遅くする原因となるため、控えるようにしましょう。また素材自体を軽くするテクニックも様々ありますので活用するといいでしょう。具体的には写真であれば、カメラで撮った写真のファイルはそのままでは画像サイズとファイルの容量が大きいため、画像編集ソフトでサイズを縮小する、または減色処理を行うなどの方法があります。 Webサイトがレスポンスよく表示されるよう、心がけましょう。自動アップデートを有効にする WordPressは既定値で自動アップデートが有効になっています。以前はアップデートによりシステムの動作が不安定になるなどの事象が発生することがありましたが、最近では安定してきていますので、自動アップデートは有効にしていて問題ないでしょう。むしろアップデートによりセキュリティやバグ（不具合）への対応が行われますので常に最新版にしておくことが重要といえます。必要最低限のSEO対策を行う Googleなどの検索結果でWebサイトが上位に表示されるよう対策を行うことをSEO対策と呼びます。 SEO対策は専門の会社もあるぐらいで非常に奥が深い領域です。とはいえWebサイトの構成を整えるという意味でも、必要最低限の対策は行っておいたほうがいいでしょう。「WordPress SEO by Yoast」というプラグインを使うと、ガイダンスに従いながらSEO対策を行うことができます。試してみるといいでしょう。 WordPress SEO by Yoast 広告（アフェリエイト）の導入は慎重に Webサイトを構築するモチベーションの１つに広告収入（アフェリエイト）もあると思います。しかし最初は広告を入れず、投稿を増やすことに専念したほうがいいでしょう。広告の導入を考えているのであれば投稿のテーマや方向性を決めておくことが重要です。投稿数が増えてユーザーの流入数が増加傾向にあることを確認できるようになったら、AdSenseなどに接続して広告導入の手続きを行いましょう。 AdSenseヘルプ – コード導入ガイド A8.net – アフェリエイトの始め方！いかがだったでしょうか。普段皆さんがご覧になっているウェブサイトも、WordPressで作られているかもしれませんね。最後に、もし「WordPressって何？」と誰かに聞かれたら、「ホームページに自分で記事の追加や更新ができるツールだよ」と教えてあげましょう。実際、どんなWebサイトが作れるのかイメージするために無料で使えるWordPressのテーマ30選も合わせてご覧ください。執筆してくれたメンター太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。大石ゆかりなるほど！！結構色々なサイトがWordPressを使って作られているんですね！！！田島悠介そうだね。1からコーディングしなくても簡単にデザインを作ったり記事を更新したりできるから、様々な場面で活用されているよ! 大石ゆかり私も今度使ってみます！！田島悠介うん、何かサイトを作ったら見せてね♪ 大石ゆかりはい！！頑張ります！！！ TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressコースを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。オンラインの説明動画や無料体験も実施中です！まずはこちらからお気軽に試してみてくださいね。人事・研修担当の方は、WordPress研修も提供しているので、合わせてご覧ください。

WordPress

WordPressで表を作成する3つの方法【初心者向け】

WordPressを使ってサイトやブログを作っていると、表を挿入したい時があると思います。そこで今回は、初心者向けにWordPressで表（テーブル）を作成する3つの方法を紹介します。自分で操作可能なものから試してみてください。目次Advanced Custom FieldsとはAdvanced Custom Fieldsプラグインのインストール方法フィールドグループを作成・設定する「テーマの編集」からコードを追加するまとめWordPressを学習中の方へ大石ゆかり田島メンター！！WordPressで表を書く方法を教えてください！！！田島悠介 WordPressで表を書く方法は3つあって、「ブロックエディタを使う方法」、「表計算ソフトで作った表を使う方法」、「HTMLで記述する方法」の3つあるんだ。それぞれ教えてあげるね！大石ゆかりはい、お願いします♪ ブロックエディタを使う最近のWordPress（バージョン 5以降、2018年12月以降）では、Gutenberg（グーテンベルグ）というブロックエディタが標準で内蔵されています。標準で搭載しているブロックエディタを使えば、完成したイメージに近い編集画面で簡単に作成できます。ただブロックエディタは今までのテキスト中心のクラシックエディタと大きく違うので使い方に慣れることが必要です。ブロックとは記事内の文章や画像や表などを管理する単位がブロックです。ブロック単位で配置の調整ができるので、今までのようにHTMLやCSSの知識がなくても編集できます。段落や表などがブロックとしてページに追加され、ブロック単位で移動や削除ができます。上の画像はブロックごとに赤の点線で囲っています。表を作成ページ編集画面（投稿や固定ページなど）を表示します。表は現在のカーソル位置の真下に挿入されるので、表を挿入したい位置の真上にあるブロックをクリックしてカーソルを移動しておきます。 ※表の挿入はブロック単位で行われるので、カーソルはブロック内であれば文末でなくても構いません。 ※カーソル位置の指定がない場合は一番下に表が追加されます。画面左上ロゴの右隣にある＋のボタン、「ブロックを挿入ツールを切り替え」をクリックします。「テーブル」をクリックします。「行数」「カラム数（列数）」を指定して、「表を作成」ボタンを押します。表が作成されるので、自由に内容を記述しましょう。 ※セル間の移動にキーボードの矢印キー「←」「↑」「→」「↓」が使えます。表計算ソフトとは違い、「Tab」キーではセル間の移動はできません。 ※「キャプションを追加」をクリックすると表の下に文章を追加できます。表の行や列を追加・削除編集したい表の中の基準にしたいセルをクリックします。今回は「りんご」の下に行を追加したいので、「りんご」のセルをクリックします。下の画像の赤丸で囲ったブロックツールバーの「表を編集」ボタンをクリックします。「行を下に挿入」をクリックすると「りんご」の下に行が追加されます。同じように、カーソル位置を基準にして行や列を挿入あるいは削除を行います。 ※表の下のキャプションをクリックした場合、基準となるセルが選択されていないので、「表の編集」ボタンをクリックしても挿入や追加のメニューを選択できません。 [PR] Webサイト制作で副業する方法とは表の位置を変更する表は他の文章や画像と同じブロックで作成されますので、後から位置を簡単に変更できます。移動したい表の中をクリックします。下の画像の赤丸で示した「∧（上に移動）・∨（下に移動）」をクリックすると、ブロック単位で表が移動します。もう1つの方法として、上の画像の緑の丸で囲った「ドラッグ」でマウスポインタが手の形になったらドラッグして表のブロックをページ内で移動できます。ブロックの間で移動したいところに青の線が表示されたらマウスのボタンを離します。表の移動ができました。表計算ソフトで作った表を使うすでに資料があったり、表計算ソフトの操作に慣れている人向けです。今回は「Google スプレッドシート」での操作を例に解説しますが、他のMicrosoft ExcelやMicrosoft Wordでも同様の手順でWordPressに表を移せます。 ※「Google スプレッドシート」を利用するにはGoogleアカウントが必要です。 ※Microsoft ExcelやMicrosoft Wordを使う場合は、すでにそのアプリがインストールされているパソコンでの使用を前提としています。 ※表を作成してコピーできる無料アプリやクラウドサービスでも構いません。まず、Google スプレッドシートで作成した表をコピーします。 WordPressに貼り付ける前に、「ビジュアルエディター」であることを確認してください。挿入したい場所に貼り付けます。更新すると、記事に反映されます。表を作成できるアプリに慣れている方は、この方法で簡単に表を挿入できます。 HTMLを記述する HTMLを直接記述する方法です。エディタの「コードエディター」を利用して、<table>～</table>タグで表を挿入します。 HTMLで編集するには編集画面を「コードエディター」に切り替えます。編集画面の右上にある3つの点の「オプション」ボタンから「コードエディター」をクリックします。以下の画面が「コードエディター」です。 HTMLでは、表は上から要素を重ねるようなイメージで作成します。 <tr>～</tr>で囲まれた部分が行（横の並び）を表し、<td>～</td>で囲まれた部分がセルです。 <tr>～</tr>の中に、<td>～</td>が挿入されているイメージです。例えば、下記の表をHTMLで表示してみます。商品A 30円商品B 50円その場合、下記のコードを入力する必要があります。 <table> <tbody> <tr> <td>商品A</td> <td>30円</td> </tr> <tr> <td>商品B</td> <td>50円</td> </tr> </tbody> </table> 以下はHTMLを入力した画面です。もし表の行を足したい場合は、<tr><td>で囲まれた部分を増やします。サイト上で確認すると、下記のように表示されました。以上、3つの方法を紹介しました。まずは自分で作成可能な方法で表を挿入してみてください。さらにWordPressを活用したい場合は、WordPressのギャラリー機能を使う方法もあわせてご覧ください。大石ゆかり表を書くことができました！田島悠介よかったね♪WordPressで表を書きたくなる場面って結構あるから、覚えておくと良いね♪ 大石ゆかりはい♪ 【参考】セルを結合するこの記事を執筆した時点では、Gutenberg（グーテンベルグ）の表でビジュアルエディターからセルの結合を行うことができません。表計算アプリなどから結合されたセルがある表を貼り付けても正しく貼り付けられません。表のセルを結合するには「クラシック」ブロックを使って、旧WordPressの表を追加する方法があります。 ※「クラシック」ブロックを使って表を作成するには、プラグイン「Advanced Editor Tools」の有効化が必要です。 ※セルを結合するには、コードエディターでHTMLコードを直接編集する方法もあります。「クラシック」ブロックとは Gutenberg（グーテンベルグ）による編集画面になる以前のWordPressと同じ操作でページ内要素を編集できるブロックが「クラシック」ブロックです。標準の「クラシック」ブロックでは表の挿入ボタンがありませんが、「Advanced Editor Tools」プラグインを追加して旧WordPressの表を挿入できます。「Advanced Editor Tools」プラグインによりセルの結合はもちろん、セルごとに罫線の種類や色や高さを設定もできます。 ※「Advanced Editor Tools」プラグインで結合できるセルは「クラシック」ブロックに挿入された表だけです。「テーブル」ブロックのセルは結合できません。「クラシック」ブロックで表を作成するには標準の「クラシック」ブロックでは表を追加できないので、「Advanced Editor Tools」プラグインをインストールして、旧WordPressの表を追加できるようにします。 ※表計算ソフトなどで作成した表をコピー貼り付けする場合は、プラグインがなくても結合されたセルがある表を「クラシック」ブロックに貼り付けられます。「Advanced Editor Tools」プラグインのインストール最初に「Advanced Editor Tools」プラグインのインストールと有効化を行います。 WordPress管理画面の「プラグイン」から「新規追加」を選択します。キーワードに「Advanced Editor Tools」と入力し、Advanced Editor Toolsプラグインの「今すぐインストール」をクリックします。インストール終了後、プラグインを有効化します。「クラシック」ブロックに表を作成する Advanced

WordPress

ゼロからの始め方！WordPressでブログサイトを作る手順とは【入門向け】

Webサイトを作成する上で人気が伸びているWordPress(ワードプレス)。今回は、WordPressを使ってブログサイトを作る手順についてTechAcademyの現役エンジニアが解説しています。 WordPressについてそもそもよく分からないという方は、WordPressとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。目次 WordPressとはサイト作成に準備するものブログサイト公開までブログサイト公開後今回の登場人物田島悠介（29）あらゆる言語をマスターしている万能型エンジニアでTechAcademyのメンター。人の成長を見るのが一番のやりがい。好きな映画は『トスカーナの休日』大石ゆかり（24） TechAcademyの受講生。 Instagramには3つの写真加工アプリで編集してからアップするという。大石ゆかり田島メンター、私今アメブロでブログ書いてるんですけど、もっとおしゃれな感じにしたいんですっ！なんか良いサービス知らないですか？田島悠介ってか、ゆかりちゃんアメブロやってたんだ！教えてよ！笑大石ゆかりそれは秘密です♪（スッピン写真とか載せてるし、絶対見せられない）田島悠介ええー。。ブログやるなら「WordPress(ワードプレス)」っていうのがおすすめだけど知ってる？大石ゆかり Word(ワード)なら知ってますけどそれとは違うんですか？田島悠介 Wordでは無いんだけど、同じような使い方で自分のサイトを作れるんだよ！大石ゆかりへえ〜そんな便利なものがあるんですね！具体的に教えてくださいっ！田島悠介おっけ〜！教えたら今やってるブログも教えてね！大石ゆかりそれはダメです！！ WordPressとは WordPressとは、CMS(コンテンツマネジメントシステム)と呼ばれるサービスの一つで、無料で使えることで有名です。ちなみにCMSとは簡単にサイト上のコンテンツを管理することができる仕組みです。普通、サイトを作ろうと思ったらHTML/CSSといった言語を使いながらプログラミングの作業が必要になります。しかし、WordPressの場合は、プログラミングを一切することなく自分のサイトを作ることができるのです。下の画像は、当サイトのTechAcademy magazineですが、このサイトもWordPressを使って動いています。ブログのように記事配信を行っていくようなサイトにはWordPressが適していると言えるでしょう。最近では企業のコーポレートサイトもWordPressで作成されているサイトがどんどん増えてきています。大石ゆかりなんでWordPressってすごい人気なんですか？田島悠介やっぱり無料で手軽なのに機能が多く何でもできるところじゃないかな！大石ゆかり私アメブロしかやったことないんですが、大丈夫ですかね？笑田島悠介もちろん！特に専門スキルは必要ないよ！ [PR] Webサイト制作で副業する方法とは準備するもの WordPressを使い、実際にWebサイトとして動かしていく上で必要なものを紹介しています。とは言ってもWordPressを使えるレンタルサーバーを利用すれば、とても簡単に済みます。現在、ほとんどのレンタルサーバーでWordPressを利用できます。初心者にも人気なレンタルサーバーには以下のようなものがあります。さくらインターネットエックスサーバーロリポップ ConoHa WING レンタルサーバーを利用すれば月額500~1,000円程度でWebサイトを運営することができます。またレンタルサーバーではアドレスが「https://◯◯.sakura.ne.jp/」のようになりますが、「◯◯.com」や「◯◯.jp」のように自由にアドレスを決めたい場合、独自ドメインサービスも利用する必要があります。独自ドメインサービスには以下のようなものがあります。お名前.com ムームードメインそれでは、さくらインターネットを例に、WordPressを利用する手順を確認していきましょう。さくらインターネットでWordPressを利用する場合、スタンダードプラン以上で契約する必要があります。以下で紹介している手順は、さくらインターネットで公開されている手順「【新コントロールパネル：クイックインストール】WordPress(ブログ)のインストール」をもとにしています。【新コントロールパネル：クイックインストール】WordPress(ブログ)のインストール WordPressを利用する手順は以下のとおりです。 WordPressをクイックインストールする Webサイトのタイトルなどを決めるでは、一つずつ解説していきます。 1. WordPressをクイックインストールするさくらのレンタルサーバ「サーバコントロールパネル」にアクセスしてログインします。サーバコントロールパネルサーバコントロールパネルホームの左側のメニューから「Webサイト/データ>クイックインストール」を選択します。 WordPressの「新規追加」ボタンをクリックします。はじめてWordPressを導入する場合は、WordPressの設定や記事を格納するデータベースと呼ばれるものを作成する必要があります。「データベース作成」をクリックします。データベースや接続用パスワードを決めて入力します。データベース文字コードは「UTF-8」のままとします。入力が終わったら「同意する」にチェックを付けて「作成する」をクリックするとデータベースが作成されます。インストールURLには「blog」などとすると良いでしょう。その他は既定値のままでかまいません。「ライセンス・利用規約に同意する」にチェックを付けて「作成する」をクリックします。インストールが完了すると以下のように表示されます。簡単ですね！次に管理画面URLにアクセスしてWebサイトのタイトルなどを決めましょう。 2. Webサイトのタイトルなどを決めるブログサイトの「サイトのタイトル」、WordPressの管理画面にログインする際の「ユーザー名」「パスワード」「メールアドレス」を入力しましょう。あとで変更することも可能です。「検索エンジンがサイトをインデックスしないようにする」にチェックすると、ブログサイトが検索結果に出てこなくなります。通常はチェックしなくて大丈夫です。 WordPressをインストールし、「成功しました！」と表示されれば無事完了です。実際にログインしてみましょう。設定したユーザー名、パスワードでログインするとWordPressの管理画面に入ることができます。無事ログインできればWordPressの管理画面に入ることができるはずです。上記の画像がWordPressの管理画面になります。ブログを投稿したり、サイトの設計を編集したり、アカウントを追加するなどは基本的にこの管理画面上で行うことが可能です。サイドメニューに情報が多く、慣れるまで少し大変かもしれませんが毎日ログインして利用していればすぐ使えるようになるはずです。大石ゆかりわぁ、WordPressっていろんな機能があるんですね。田島悠介管理画面の使い方についてはこの後詳しく見ていくから付いてきてね！大石ゆかりは、はいっ（汗）ブログサイト公開まで実際にWordPressが利用できたらWebサイトのデザインや構成を編集していきます。これから作っていこうと思っているブログ記事やカテゴリなどデザインを整える必要があるでしょう。 Webサイトの構成(サイトマップ) テーマの選択公開するブログサイトの構成、つまりサイトマップを考える必要があります。作る前から細かく設定する必要はありませんが、サイト内にどんなページが必要なのか書き出しておくとテーマも選びやすくなります。簡単にブログサイトのサイトマップを作ってみました。テーマとは、簡単に言えばサイトのデザインです。 WordPressが人気な理由の一つとして最初にも紹介しましたが、HTMLやCSSなどデザインやプログラミングの作業をしなくてもテーマを選択するだけで一つのサイトにすることができます。何もしなければサイトデザインはデフォルトテーマ「Twenty Twenty」が適用されています。このテーマでも十分魅力的なWebサイトを作成することができますが、「もっとおしゃれなテーマにしたい」、「ヘッダーやフッターをつけたい」などサイトに合わせてテーマを選んでいきましょう。テーマを変更する際は、「外観」>「テーマ」で変更することが可能です。テーマ自体は、WordPressだけでなくいろんな企業や個人で提供しているので、調べてみることをおすすめします。無料で使えるWordPressのテーマ30選も合わせて紹介しておきます。大石ゆかりサイト上に大きく動画が流れるようなデザインとかもできますか？田島悠介もちろん動画が流れるテーマはたくさんあるよ！大石ゆかりおお、そうなんですね♪ 下から浮き上がったり横からスライドしたり動きのあるサイトとかも作れます？田島悠介パララックスっていうサイトかな。もちろんあるよ！WordPress自体世界中で使われてるからテーマを作る人も世界中にいて、種類に困ることは無いと思うよ！固定ページについて固定ページは更新することが少ないページで利用します。企業ページの場合、会社概要やお問い合わせページなどが該当します。また、デザインテーマによっては、固定ページで設定した内容を上部のナビゲーションメニューで自動的に表示してくれます。例えば、次のように、ニュース・インタビュー・テクノロジー・キャリア・お問い合わせという5つの固定ページを作成した場合、ページ上部にこの様に表示されるイメージになります。投稿ページについて WordPressは元々ブログを作成するために開発されたアプリケーションです。投稿ページでは日々のブログを投稿するイメージで、ページが作成されます。固定ページと異なり、デザインテーマの標準状態で、ページ上部のナビゲーションメニューに投稿ページの内容が表示されることは、ほぼありません。通常は、トップページに投稿日の新しい順に表示されます。ブログサイト公開後 WordPressが選ばれている理由の一つにカスタマイズの柔軟性がよく挙げられます。記事を追加、更新できるだけでなくWebサイトのSEO対策や会員機能の追加など簡単に行えるのです。せっかくブログサイトを作ったらより多くの人に見てもらいたいはずです。プラグインの導入ブログ記事の投稿プラグインの導入は「プラグイン>新規追加」から行います。キーワードなどで検索を行い、導入したいプラグインの「今すぐインストール」をクリックします。プラグインをインストールしたら「有効化」を行います。ちなみに以下のプラグイン「WooCommerce」はWordPressでECサイトを構築する定番中の定番のプラグインです。プラグインはいつでも設定できるので、必要に応じてインストールしましょう。 WordPressでまず最初に入れるべきプラグインを参考にしながらより本格的なサイトにしていきましょう。続いてブログ記事を実際に投稿してみましょう。新規でブログ記事を作成する場合は「投稿>新規追加」で新しく公開することができます。 WordPressはバージョン5.0からエディタがブロックエディタに変更されています。/か+ボタンで要素を選択しながら、ブロックを組み立てるように記事を作成していくのが特徴です。文章だけでなく画像や動画を記事内に挿入し、素敵な記事を作成すると良いでしょう。サイドメニューの「投稿」>「投稿一覧」で現在公開している、下書きの記事を一覧で見ることができます。サイトデザインはデフォルトテーマ「Twenty Twenty」が適用されていますが、以下のように「Hello world!」というタイトルのブログ記事を読むことができました。大石ゆかりついにブログ更新が始まるって感じですね♪ 田島悠介そうだね！ちなみにゆかりちゃんはどんな事書いていくの？大石ゆかりんー特に決めてないんですけど海外の映画とか見た感想をつらつらと書いていこうかなって思ってます♪ 田島悠介おお、いいね！じゃあ、僕の好きな「トスカーナの休日」もぜひ紹介してね！おさらい WordPressとは誰でも簡単にサイトを作れる便利なサービス！ WordPressはレンタルサーバーで簡単に始められる！サイトを作る上でサイトマップを作成しよう！ WordPressはテーマとプラグインが充実している！初めてWordPressでサイトを作る際、サーバーやドメインの契約、新しいツールの導入など慣れない作業が多いかもしれませんが、サイトを公開してしまえば後はどんどんブログ記事の作成に集中できます。 WordPressの使い方を覚えて、ぜひ自分だけのブログサイトを作ってみましょう。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressコースを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。オンラインの説明動画や無料体験も実施中です！まずはこちらからお気軽に試してみてくださいね。

WordPress

Custom Post Type UIの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。今回は、WordPressでカスタムフィールドを設定できるプラグイン、Custom Post Type UIの使い方を紹介します。なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。大石ゆかり田島メンター！！カスタム投稿タイプってとても便利なんですけど、もう少し使いやすい方法ってないんですか〜？田島悠介「Custom Post Type UI」っていうプラグインを使うと、簡単にカスタム投稿タイプを使えるようになるよ。大石ゆかりそうなんですか！？教えてください！！ Custom Post Type UIとはこのプラグインは、WordPressの便利な機能であるカスタム投稿タイプを、簡単に追加・編集できるプラグインです。普通の投稿タイプとは違った形式の「更新情報」や「感想」といった投稿タイプを設定したい時に役立ちます。テーマのphpファイルを編集する必要もないので、初心者でも気軽に使うことができます。プラグインをインストールするこのプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。インストールと有効化が完了すると、ダッシュボードに「CPT UI」という項目が追加されています。ここから設定を行います。 [PR] Webサイト制作で副業する方法とはカスタム投稿タイプを追加するダッシュボード＞CPT UI＞新規追加をクリックして管理画面を開きましょう。左側がカスタム投稿タイプの追加フォーム、右側がカスタムタクソノミー（カスタム分類）の追加フォームという構成になっています。投稿タイプ名や、ラベル名などを入力します。この際、投稿タイプ名は必ず英数字（20字以内）で入力しましょう。他の投稿タイプで使われている「post, page, attachment, revision, nav_menu_item」は使用不可です。ラベルは、管理画面のサイドバーに表示される名称です。日本語でもOKなので、自分で使いやすいようにしましょう。また、「Advanced Label Options」というボタンをクリックすると、管理画面の表示項目をカスタマイズできます。必須というわけではありませんが、翻訳が中途半端なプラグインなので、好みに合わせておくと作業効率が上がります。他に、「Advanced Options」をクリックすると、システム部分の設定ができます。基本的には、デフォルトのままで問題ないですが、以下の2点は好みに応じて変更してください。 Has Archive：カスタム投稿タイプのアーカイブを作成したいときは「True」にする Exclude From Search：カスタム投稿タイプをページ検索の対象とするか否か入力が完了したら、Create　Custom　Post　Typeのボタンをクリックします。この段階で、ダッシュボードに作成したカスタム投稿タイプが追加されました。カスタムタクソノミーを追加するカスタム投稿タイプで使えるタクソノミー（分類）も、同じ手順で編集可能です。入力方法はカスタム投稿タイプとほぼ変わりませんが、どの投稿タイプで使うかのチェックボックスがありますので、忘れないよう設定しましょう。これで、ダッシュボードから簡単に投稿記事を作成することができるようになりました。作成したカスタム投稿タイプ・カスタムタクソノミーの編集作成したカスタム投稿タイプとカスタムタクソノミーの編集は、下記のように行います。ダッシュボード＞CPT UI＞Manage Post Type ：カスタム投稿タイプの編集画面ダッシュボード＞CPT UI＞Manage Taxonomies ：カスタムタクソノミーの編集画面今回の記事は以上です。他のWordPressのプラグインを使ってみたい場合は、WordPress Popular Postsの使い方も合わせてご覧ください。ぜひ、WordPressの使い方を覚えましょう！大石ゆかり簡単にカスタム投稿タイプを作れました〜！！！田島悠介 phpファイルを触る必要がないから気軽に作れるね♪ 大石ゆかりそうですね〜♪ [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

WordPress

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

独自のカスタムフィールドを作成できる！Advanced Custom Fieldsの使い方ーWordPressプラグイン【初心者向け】