WordPressの使い方や設定方法一覧:導入〜応用まで全て解説

WordPress

このページはWordPressのダウンロード〜設定方法、Gutenbergの使い方、応用など、WordPressを使えるためにサポートするための記事です。(一覧まとめページ)

WordPressの使い方を説明するには一つ一つの内容が濃すぎるので、ステップ毎に記事を公開していっています。

初心者の方はステップ1から順に読み進んでいって下さい。逆にある程度リテラシーのある方は気になる記事が見つかれば良いと思います。

ステップ1:前知識

まずはWordPressについて知ろう!!

WordPressとは?

以下参照。

WordPress(ワードプレス)は、オープンソースブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している(後述のプラグインよりSQLiteでの使用も可能)。単なるブログではなくコンテンツ管理システム (CMS) としてもしばしば利用されている。b2/cafelogというソフトウェアのフォーク(後継)として開発、2003年5月27日に初版がリリースされた[4]GNU General Public License(GPL) の下で配布されている。

https://ja.m.wikipedia.org/wiki/WordPress
要するに

動的サイトを生成するのに必要な複雑な要素が予め組み込まれており、ブログサイトはもちろんの事、他にもコーポレートサイトやECサイトにも活用できる、世界で最も使われているオープンソースのコンテンツ管理システム(CMS)です。

下記の記事では更に詳しく説明しています。

費用と知識

WordPressの一般的な費用感と必要な知識は?

WordPressを導入する際に必要になってくるリアルな金額感とその他の費用。実際に作業するにあたって必要な知識を3段階に分けて紹介しています。

WordPressの事を知るためにこのような金額感も知っておくと無駄な出費が減るかと思います。

HTML&CSSの基本

HTMLとCSSの基礎知識はもっておこう!!

WordPressは基本的には、マークアップ言語の知識が無くても更新出来るようになっていますが、HTMLとCSSの知識はいずれ必要になってきます。ここでは何となくの知識でも良いので一度目を通しといた方が良いです。

ステップ2:準備

WordPressサイトを作成する準備をしよう!!

サーバー

サーバーの契約

WordPressを使うには必ずサーバーが必要になります。(通常の静的サイトでも)

若干アフィリエイターの目線からの記事だが、エックスサーバーを例に実際の契約の手順を書いています。初めてのサーバー契約で不安な方は見ていって下さい。

ドメイン

ドメインの取得

ドメインはサイト制作で絶対に必要な知識なのでWordPressを使う前に必ず覚えておきましょう。

初心者におすすめなエックスドメインからのドメインの取得方法とドメインがなぜ必要なのか?を分かり易く説明しています。

WordPressのインストール

WordPressをインストールしよう!!

サーバーとドメインが用意出来たらいよいよWordPressのインストール作業です。

といってもサーバーによってはワンクリックで簡単にインストール出来るのでそのやり方に沿ってインストールしていきましょう。

テーマのインストール

テーマをインストールしてより便利なCMSに変えよう!!

テーマとは、予め決められたデザインや仕組みが組み込まれており、それをWordPressにインストールする事によって複雑な処理をする事なく反映される事が出来るテンプレートの事です。

様々なテーマが存在するので自分のイメージに近いテーマを選んでいきましょう。

インストール後直ぐやろう

WordPressをインストールしたら直ぐにやっておいた方が良い作業!!

重要な作業

・サイトのSSL化対応
・プライバシーポリシーの設置
・Google analyticsの設置
・Google search consoleの設置
・お問い合わせの設置

上記の作業は後々必ずやらなくてはいけない作業であり、後になるにつれて面倒くなってしまう作業です。WordPressのインストール後に直ぐにやっておいた方が良いです。

ただいきなりは難しいので、このくらいの作業があるんだなって思って頂ければ良いと思います。WordPressに慣れてきた頃に一気にやって下さい。

ステップ3:使い方

WordPressの基本的な使い方を知ろう!!

新着記事

1番基礎となる記事の作成方法です。

WordPressは誰でも簡単にブログ感覚で新着記事を作成出来ます。TwitterやFacebookを使かうくらい簡単なので、まずは自分なりに記事を作成してみましょう。

タグ

タグの作成

タグのWordPressを使うメリットの一つです。簡単に作成できネットワークによりユーザーの回遊経路になります。

適切なタグの付け方が大事で、よくハッシュタグと混合した間違った扱われ方をしているので注意が必要です。

カテゴリー

カテゴリーの作成

WordPressを使うメリットの一つはカテゴリーです。カテゴリーを分別する事で自動でネットワークが形成され、ユーザーが貴方のサイトを回遊し易くなります。

非常に重要な部分なので、納得のいくカテゴリーを付けていこう。

リンク

リンクの貼り方

WordPressはHTMLの知識が無くても簡単にテキストリンクの作成が可能です。邪魔にならない分かり易いリンクはユーザーにとってはありがたいので積極的に使っていこう。

メニュー

メニューを作ろう

メニューもWordPressを使うメリットの一つです。ユーザーが回遊し易く迷子になり辛いメニュー構成を意識して作っていきましょう。

カテゴリーとメニューを先に作ってしまえば、サイトのテーマとなるので記事のネタを考える際の一つの指標になってきます。逆にそれが無いと自由過ぎてまとまりのないサイトになりがちです。

プラグインのインストール

プラグインと言われる拡張ツールをインストールして自サイトをカスタムしていこう。

プラグインを入れすぎるとあまり良く無いが、入れた方が良い物も沢山あります。自分のサイトには何の機能が必要かを取得選択しより運用しやすいサイト作りを行いましょう。

ステップ4:Gutenberg

WordPressの標準エディタであるGutenberg(グーテンベルク)の使い方を知ろう!!
Classic Editorに戻したい場合はプラグインの「Classic Editor」をインストールして下さい。

テキスト効果の付け方

記事に強弱を付けて読みやすい記事を心がけよう。

太字や斜体などのテキストに効果をつける方法を紹介します。基本的にWordPressの標準機能で搭載されているワンクリック機能での追加の仕方です。

文字サイズの変更

フォントサイズを変更して読みやすい文章を作成しましょう。

CSSでフォントの大きさや太さなど、サイズを変更するためのプロパティをいくつか紹介しています。

改行の仕方

WordPressは改行の仕方が特徴的です。

pタグでの改行の仕方を説明しています。pタグで意図したいスペースができてします場合は確認しときましょう。

見出しの付け方

記事を見やすくするために見出しを付けよう!!

h2h4の見出しを作成し記事全体を見やすくしましょう。見出しのデザインを変えたい場合はstyleを記述します。

表の入れ方

表を作ろう!!

表とは以下のようなものです。一覧表や価格表などで使えるブロックです。

列1行1列2行1列3行1
列1行2列2行2列3行2

リストの入れ方

リストを作ろう!!

リストとは以下のようなものです。箇条書きや目次などに使えるブロックです。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

画像の挿入

画像を埋め込もう。

画像の挿入

WordPressでは、HTMLの知識がなくても簡単に画像を投稿することができます。またメディア関連の管理はワーソプレスの得意分野です。メデイアの整理や画像の編集、変形など様々なことがWordPress内で可能となっっています。

PDFを埋め込もう

ファイルやPDFを埋め込んで、ダウンロードボタンを付けよう。

WordPressでは下記のように簡単に書類(ファイル)リンクを作成でき、さらにダウンロードボタンまで作成可能なブロックがあります。重要な書類や重たい書類などは別途でリンク先に用意すれば良いでしょう。

動画の埋め込み方

動画を埋め込もう。

WordPressではこの様に簡単に動画の埋め込みが可能です。どんがコンテンツの重要性が増してきているのでサイト内でも積極的に動画を使っていきましょう。

GIFの投稿

動画同様にWordPressはGIFもサポートしています。

動画が重い場合で、短い表現で済む様な内容ならGIFにして投稿しよう。画像より細かな表現ができ容量も多くないのでお勧めです。

カラム

カラムを追加して横にブロックを並べて美しいレイアウトを作成しよう!!

Gutenberg(グーテンベルク)では簡単にカラムの作成が可能です。デフォルトでは最大3カラムまでですがカスタムHTMLを使えば無限に作成可能です。

サイトの見栄えをよくするのに重要な技術なので覚えておこう!!

再利用ブロック

再利用ブロックを作って効率的にサイト運営をしよう!!

Gutenberg(グーテンベルク)では再利用ブロックと言われる効率化の方法があります。この方法によりあらゆるページに任意で同様のブロックを複製することができます。

非常に便利なブロックなので是非活用していって下さい。

グループ化

Gutenberg(グーテンベルク)ではブロックをまとめてグループ化する機能がついています。

グループ化はHTMLのdivで囲ったのと同じ意味です。わざわざコードエディタでdivを使わなくても簡単にグループ化することが出来ます。

HTMLでの記述

カスタムHTMLやコードエディタを使って細かな記述も可能になろう!!

カスタムHTMLを使えば細かなデザインやコーティング、レイアウトなどが思うがままに可能です。

Gutenbergのブロックエディタで思い描いたものができない場合はこれを活用しましょう。またコードエディタでは投稿コンテンツ全体をHTMLでの記述が可能です。

ステップ5:運用/効率化(応用)

WordPress内で使用可能な便利なツールやプログラミング言語の活用でより効率的にサイト運営を行おう!!

アクセスやコメントをブロック

WordPressは設定からコメントのブロックが可能です。またサーバーの設定を使えばアクセス自体もブロックすることが出来ます。

WordPressでブログやサイトの運営をしているとスパムコメントや不正アクセスは日常的に起きてきます。これらを無視しているとサーバーハックやサイトの改ざんなど痛い目に合うので何かしら対処をしていかなくてはいけません。
しっかりとセキュリティ関連の設定と、今回の様な事前のアクセス、コメント拒否を設定しときましょう。

カラーパネル

カラーパネルの使い方と色の付け方(カスタムCSS)を理解して効率良く鮮やかな色合いを付けよう。

WordPressの色の設定をカスタムCSSで指定を振り直して自由なカラー選択ボタンを作成します。デフォルトよりくっきりとした色合いから、グラデーションなど色々カスタム可能です。

アイコンフォント

アイコンフォントを使って楽にオシャレなデザインを作成しよう。

Font Awesomeの初期設定、基本的な使い方と、CSSクラスを使用した色や大きさの変更方法やアニメーションなどの様々なカスタマイズ方法を紹介しています。

アニメーション

アニメーションを入れてユーザーに分かりやすいサイトにしていきましょう。

CSSを使用してフェードインアニメーションの実装の仕方を説明していきます。通常のフェードインの他に、左右上下からのフェードインもあります。また初心者の人でも使いやすく基本的に丸々コピペでOKな様にしますのでぜひ使ってみて下さい。

予告

今後追加予定の記事

  • カスタム
  • デザイン集
  • 効率化
  • など

以上が「WordPressの使い方や設定方法一覧:導入〜応用まで全て解説」でした。

まだまだ完全網羅はできていないので、随時記事を更新していきます。今後はどっかの誰かが有料で公開している様な内容をガンガン更新していく予定です。最終的には完全網羅したWEBマニュアルページの様にしていきます。

2020年2月19日WordPressWEB,WP

Posted by KT