【STINGER】ワードプレスの使い方【導入後から記事投稿までを解説】
ブログを始めたばかりの方、初心者の方に向けた記事になります。
WordPressを始めたのはいいけれど、どうやって操作したらいいかわからないという方もいるかとおもいます。
今回は初心者の方におさえてほしい基本機能をご紹介します。
※テーマ【STINGER】を使用しております。テーマによっては操作方法が異なる場合がありますのでご了承ください。
【STINGER】ワードプレスの使い方【導入後から記事投稿までを解説】
アイコン画像を登録
WordPress管理画面のサイトアイコン設定機能を使います。
設定することでサイトを見分けやすくなりアクセスしてくれた方の印象に残るようになります。
サイトアイコンを登録すると
・ウェブサイト独自のアイコンになりブラウザのタブに表示されます。
・スマートフォンでホーム画面にショートカットを作成した時もアイコンが表示されます。
手順
まず初めにアイコン登録用の画像を準備します。
外観メニューからカスタマイズを選びます。
サイト基本情報をクリックします
サイトアイコンを選択をクリック
アイコンにしたい画像を選び選択をクリック
範囲を指定して画像切り抜きをクリック
設定すると以下のように表示されるようになります。
以上で設定は完了です。
【STINGER】ワードプレスの使い方（プロフィールを設置）
サイトアイコンの設定が完了したら次はプロフィールを表示させましょう。
トップページのサイドバーに表示させるイメージです。
サイトにアクセスしたとき「このサイトはどんな人が運営してるのだろう？」と気になりませんか？
例えば主婦や子育てを頑張りながらブログを運営している方を見ると好感が持てますよね。
まずは簡単な自己紹介で構いませんので、プロフィールを作成してサイドバーに設置してみましょう。
メニューのメディアから新規追加をクリックします
ファイルを選択をクリック
アップロードするファイルを選択します
アップロードが完了したら編集をクリックします
画像のファイルURLをコピーします
プロフィールに表示させる画像の準備はできました。
次にプロフィールを作成するのでサイドバーにウィジェット（表示させる場所）を追加します。
メニューの外観からウィジェットをクリックします。
利用できるウィジェット一覧が表示されます
下へスクロールし【テキスト】をクリック
サイドバートップを選択します。
ウィジェットを追加をクリックします。
今回はプロフィールを作成するので、タイトルに【プロフィール】と入力します。
タイトルスペースの右下あたりに【ビジュアル】と【テキスト】タブがあるので【テキスト】をクリックします。
【ビジュアル】では直感的に文字を入力、装飾が可能です。
【テキスト】はHTMLを使ったことがある人向けです。初心者のうちはあまり気にしなくても大丈夫です。
画像を表示させるには以下のように入力します。
枠内のコードをコピーして貼り付けます。
|
＜サンプル＞ <center> <img class="profileimg" src="https://skillno-manabi.com/wp-content/uploads/2020/03/IMG_5670.png" alt="プロフィール画像です" width="120" height="120" /> </center> |
赤いテキストの部分が画像のURLになります。
サンプルのURLは削除し、先ほど画像を準備した時にコピーしたURLを貼り付けましょう。
以下のように貼り付けることができたら保存をクリックします。
【ビジュアル】タブをクリックします。
画像が挿入されているのが確認できればOKです。
次に本文を入力しましょう。
本文を入力したら保存をクリックします。
保存ができたらトップページを確認してみましょう。
反映されていればOKです。
【STINGER】ワードプレスの使い方（ナビゲーションメニューを配置）
プロフィールの設置が終わったら次はナビゲーションメニューを設定しましょう。
ナビゲーションメニューを設定すると以下のような項目をサイトトップページに表示できるようになります。
ナビゲーションメニューの役割は？
アクセスしてくれた人がこのサイトにはどのようなコンテンツがあるのかが一目でわかるので訪れた人が興味のある記事を探しやすくなります。
それではナビゲーションメニューを設定するにあたり以下の項目を覚えていきましょう。
メニュー項目を追加
まずはトップページに【管理者プロフィール】という項目をを作ってみましょう。
【ダッシュボード】から【固定ページ】の【新規追加】をクリックします。
新規固定ページを追加のタイトルスペースに【管理者プロフィール】と入力します。
同時にパーマリンクを編集します。（わかりやすい名前でOKです。プロフィールページなので【profile】とします）
公開ボタンを押します
ここまでの手順でトップページに配置するナビゲーションメニュー用の項目が完成しました。
ナビゲーションメニューを登録
【外観】の【メニュー】を開きます
【メニュー名】のスペースに名前を入力します。今回はナビゲーションメニューと入力しましょう。
入力が終わったら【メニューを作成ボタン】をクリック
【固定ページ】のエリアに先ほど作成した【管理者プロフィール】が追加されています。
クリックでチェックを入れたら【メニューに追加】をクリックします。
メニュー構造に管理者プロフィールが追加されました。
【メニューの位置】から【ヘッダー用メニュー】を選択し【メニューを保存】をクリックします。
トップページへ戻ると管理者プロフィールが追加されています。
ここまでがナビゲーションメニューに項目を追加する方法でした。
【トップページ】の項目もナビゲーションメニューに追加してどのページからでも戻ってこれるようにしておきましょう。
まずサイトのURLをコピーします
【外観】の【メニュー】から【カスタムリンク】をクリックします
URLのスペースに先ほどコピーしたサイトのトップページアドレスを貼り付けます
リンク文字列には【トップページ】と入力して【メニューに追加】をクリックします
並び替え
【外観】の【メニュー】で操作します。
【トップページ】をドラッグ＆ドロップで先頭に並び替えたら、メニューに保存をクリックします。
トップページに設定が反映されていればOKです。
ドロップダウンの設定
ナビゲーションメニューにドロップダウンの設定を加えるとカーソルを合わせたときに隠れていたメニューが表示されるようになります。
メニュー構造に項目が３つあるとします
この中の一つにドロップダウンを加える（例えばTrendにカーソルを合わせたときにWordPressのメニューがドロップダウンで表示されるようにしたい）場合
WordPressをクリックしたまま右に少しスライドさせたら、【メニューを保存】をクリックします。
トップページで戻り設定が反映されていればOKです。
【STINGER】ワードプレスの使い方（記事を投稿）
【投稿】から【新規追加】をクリックします。
投稿をする際のデフォルトの画面になります
【タイトルを追加】に今回はテスト投稿なので【テスト】とします。
下書として保存をクリックします。
すると投稿が下書きされます。
パーマリンクの設定
今回はテストというタイトル記事ですのでパーマリンクにもテストと表示されています。
編集ボタンで変更することができます。【test】にしました。出来ればローマ字表記に変更するのをおすすめします
メディアを追加（本文のスペースに画像を入れる）
【メディアを追加】をクリックします
※画像をアップロードしたい場合はドラッグ＆ドロップで簡単にできます。
好きな画像をクリックして投稿に挿入をクリックします。代替テキストに画像の説明を入れておきましょう。
画像の配置を指定します。
画像をクリックした際のリンク先を指定します。通常は【メディアファイル】を指定します
添付ファイルのページの場合。添付ファイルのページリンクへ飛びます
カスタムURLの場合。リンク先を指定できます
画像サイズは指定した画像によって選択サイズが異なります。
画像が挿入されればOKです。
ギャラリーを作成
複数の画像をまとめて表示したいときに使います。好きな画像を選択後、【ギャラリーを作成】をクリックします
キャプション（説明文）を入力します
カラムに数字を入力して横に何枚並べたいか指定できます。入力したら【ギャラリーを挿入】をクリックします。
ギャラリーが挿入されればOKです。
本文入力でよく使う機能
<太字>
<テキストの色の変更>
<リンクの挿入>
テキストをクリックしたとき指定したアドレスのリンクページへ移動します。
その他の機能
<公開状態の設定>
【パスワード保護】を選択するとパスワードを知っている人のみ閲覧できます。
保護された記事をクリックするとパスワードの入力を求められます。
【公開予定日を設定】作成した記事を予約することが可能です。
<カテゴリーを追加>
【新規カテゴリーを追加】をクリックします
【My story】というカテゴリーをを作成してみます。
【新規カテゴリーを追加】をクリックします。
追加されればOKです。これで記事を作成した時にカテゴリー分けしやすくなります。
親カテゴリーの中に子カテゴリーを複数入れることが可能です。
<タグ>
カテゴリーと同じというイメージでいいと思います。
テストと入力してみます。【追加】をクリックします。
追加されていればOKです。
<アイキャッチ画像>
ブログ記事にサムネイル画像が表示されます。
【アイキャッチ画像を設定】をクリックします。
画像を選択し【アイキャッチ画像を設定】をクリックします
アイキャッチ画像が設定されました。
トップページを確認してサムネイルが表示されていればOKです。以上が記事を投稿するまでの流れとなります。
最初は難しくてわからないといった方も基本操作を学ぶことで全体的な流れやイメージといったものがつかめてくると思います。WordPressにはまだまだ機能がたくさんありますがいろいろと触っているうちに身についていきますので少しずつステップアップしていきましょう。
