ワードプレスの使い方




Contents

 ワードプレスで作成したデモサイト

デモサイトを見る

上記のサイトを作成するための情報でデモサイトを作りました。
新しいサイトを作る場合の個人的な参考用としても使います。

 ワードプレスでタグを使う

ワードプレスでタグを使用する場合。

例えば、特定の文字を赤色にしたい場合、そのまま書き込むと、

<font color=red>赤色</font>

と表示されてしまいます。

(今回のケースでは、タグの中の「赤色」という個所を赤くしたかった)

これは、ワードプレスでそのままタグを使用した時の状態で、たぶん一度は経験しそうな状態です。

実は、タグが使えなくてもいいかと思っていましたが、アフィリエイトのリンクを貼る際にも同じ状態で表示されてしまうため、この問題を解決する必要があります。

この解決方法は簡単で、ワードプレスで内容を書き込む際に、右上に「ビジュアル」と「テキスト」という表示の選択があります。

通常の入力画面は「ビジュアル」の状態なので、タグを書き込むときは「テキスト」に切り替えて入力するだけです。

ビジュアル <font color=red>赤色</font>

テキスト 赤色

アフィリエイトのリンクも、同じように「テキスト」画面で入力すれば、うまく広告を貼れると思います。

 ワードプレスでセキュリティ強化 ログインIDを非公開にする

ワードプレスのログイン(ユーザー)IDは簡単にばれてしまうということを知っておかなければならない。

自分のサイトに「/?author=1」を付け加えると、デフォルトであればユーザーIDが表示されてしまう。
そこでいくつかの方法によって対処する必要があります。

①「︎Edit Author Slug 」プラグインで対応する
プラグインを導入するだけなので簡単。

②functions.php に404ページを表示する記述を追加。

③ワードプレスメニューのユーザー→あなたのプロフィール、からニックネーム等を変更

とりあえず、新しくワードプレスでブログをはじめた場合にまず上記の設定をしておこう。
意外と忘れがちだけど、テーマを変更した場合も設定がリセットされるので忘れずにチェックしよう。

 ワードプレスでバナーを横並びにする

ワードプレスで広告のバナーを横並びにする。

無料ブログなどでは、デフォルトで広告バナーが横並びに表示されることもあるが、ワードプレスでは、デフォルトでは縦並びに表示される(ようだ)。

そこで、広告を張り付けていくと、無駄に縦長に広告が並んでしまう。

そういったときに、横並びに表示させる方法をメモしておこう。

<table><tr><td>①</td><td>②</td><td></table>

この①と②に広告を挿入する。

そうすると、広告が横並びに表示されすっきりする。

 人気記事をサイドバーに設置する方法

WordPress Popular Posts、というプラグインをインストール。
メニューのプラグイン→新規追加→プラグインの検索

設置は、外観→ウィジェットで。

 問い合わせフォームの作り方

「Contact Form 7」プラグインを導入。

管理画面より、お問い合わせ→新規追加

特に設定する必要もなく、デフォルトで使用可能。

そのままの状態で、「保存」ボタンを押す。

タイトルの下に、「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください: 」というメッセージがあり、さらにその下にメールフォーム作成時に表示されている「コード」があるので、それをコピー。

(私の場合、このタグが背景と同化した色で見えにくい。同じく見えにくい人もいるかもしれないが、その場合該当箇所をクリックするとわかる)

固定ページとして利用する場合

通常の固定ページを新規で作成し、タイトルに「問い合わせ」等を入力。記事の方に上記のタグをペースト。そこで保存。

その後、その固定ページを外観→メニューで追加。

サイドバーに表示する場合

外観→ウィジェットでテキストをテキストを追加。

タイトルに「問い合わせ」等を入力。内容欄に上記のタグをペースト。そこで保存。

比較的簡単に作成可能。

 問い合わせフォームのスパム対策

「Contact Form 7」で問い合わせを掲載した途端、さっそくスパムメールが届いた。

スパム対策のプラグインを有効にしても効果はなかったので、別の設定で対応。

問い合わせフォームを編集

フォームメニューの「承認確認」

そこで下部に記載されているタグをコピー。

<p>フォームを入力したら「確認」にチェックを入れて「送信」ボタンをクリックして下さい。</p>
[acceptance acceptance-〇〇〇]確認

↑この黒字の部分がタグ。その他は、親切に文面を追加。タグの後の「確認」も追加。

そうすると、チェックしないと送信できなくなる。

これでスパムが送られなくなるらしい。

 PING送信設定

ブログの記事を早く検索エンジンにインデックスされる方法として、ping送信という方法がある。

メリットがあまりないと思う人もいるかもしれないが、デメリットがないのであれば試してみるほうがいい。

設定は簡単で、ワードプレスの設定方法は、メニューの「設定」→「投稿設定」→「更新情報サービス」の欄にping情報を追加するだけ。

デフォルトで1件記載されているが、インターネットで「ping」を検索して、新しいping情報をコピーアンドペーストで張り付ければ終わりだ。

 目次の作り方

ブログの記事を書いていくと、大まかな目次を作ると見やすくなる。そこで、目次をつくるプラグインを導入してみたんだけど、よくわからなかったのでまとめてみる。

「table of contents plus」というプラグインを導入。プラグイン→新規追加でプラグインの検索。

インストールして有効にすれば完了。かと思われたが、目次が全然作られない!もちろん、設定をしなければならいんだけど、その設定をしても何も変わらないので悩んでいた問題は次のこと。

そのまえに、このプラグインの設定は、特にいじる必要はないが、設定の中の、「TOC+」と書いているものを選択。

目次ができるかテストのために、表示条件を「2つ」以上にして保存。これでおしまい。

問題は、ここから。目次で拾う記事を選択しなければならない。そこで出てくるのが、以下のような記述。

<h1>タイトル</h1>
 <h2>テキスト</h2>
  <h3>テキスト</h3>
   <h4>テキスト</h4>
「h」の数字によって、文字の大きさが変わってくる。「h3」が個人的には見やすい大きさだった。h1が一番大きく、数字が大きくなるにしたがい文字サイズは小さくなっていくようだ。これを、目次にしたいワードの前後に書き込めばいい。この目次の作り方というワードを目次にとりいれようとすると、<h3>目次の作り方</h3>となる。さらに、その見出しの中に小さな見出しがある場合は、同じ大きさではなく、たとえば<h4>といった、文字サイズが小さくなるように(hの数字が大きくなるように)設定するといいらしい。今のところ、別のサイトで同じhサイズでの目次に成功したので、時間があればこのページも目次を導入しようと思う。
つまり、プラグインを煎れた後に、<h>タグを使う必要があるということ。ブログの書き込む際にワンボタンでないかと探してみたがよくわからないため、手動での入力となる。
ここまで設定したのに目次が表示されない!そんな時は、設定画面の「post(投稿記事)」にチェックが入っているか確認しておこう。デフォルト(初期設定)では「page(固定ページ)」のみチェックが入っているため、この箇所にチェックを入れないとブログの投稿記事で目次が表示されない。

 クイックタグの意味一覧

ワードプレスで記事を作成するときに、上部に記号がある。「B」などはわかりやすいが、それ以外の記号の意味が分かりにくいため、ここでまとめておくことにする。

bボタン

選択した部分の前後に<strong>と</strong>が付き、選択部分を強調し、太字にする。

iボタン

選択した部分の前後に<em>と</em>が付く。効果がでないの不明。

linkボタン

外部のサイトにリンクするならURLを入力し、自分のサイトのページをリンクするなら「既存のコンテンツにリンク」ボタンを押してリンクしたいページを選び、「リンクを追加」をクリックする。

b-quoteボタン

テキストを選択して、b-quoteボタンを押すと選択した部分の前後に<blockquote>~</blockquote>が付く。効果は「引用」

delボタン・insボタン

delボタンは選択した部分を<del>〜</del>で囲み、削除されたことを表す。
insボタンは選択した部分を時間〜</ins>で囲み、後から追加されたことを表す。

ul,ol,liボタン

ul,ol,liボタンは、リスト(箇条書き)を作るためのボタン。使用しなくても問題ない。

moreボタン

「続きを読む」を表示させるらしいが、当サイトでは反応しない。

 ワードプレスおすすめ無料テーマ

以前はスティンガーを使っていたが、現在の最新版は初心者にはシンプルすぎて使いにくくなった。現在のおすすめはSimplicity。

固定ページの日付の消し方

ブログの投稿であれば日付が入っていてもいいが、固定ページは不要。そこで、日付の消し方をメモ。

外観→カスタマイズ→レイアウト(投稿・固定ページ)でチェックをはずす。

 ワードプレスで記事の順番を並び替える

固定ページや投稿ページの順番をドラッグで簡単に変更するプラグイン。

「Intuitive Custom Post Order」
上記のプラグインを導入することで、記事の並び替えが簡単にできる。
設定→並び替え設定にチェックをいれるだけ。

 ワードプレスで並べて広告を表示する方法

ワードプレスで広告を綺麗に並べる方法。

<div style=”float: left; padding-right: 10px;”>①</div>
<div style=”float: left; padding-right: 10px;”>②</div>
<div style=”float: left; padding-right: 10px;”>③</div>

①、②、③の箇所に広告を挿入すると、綺麗に並んで表示される。

 ワードプレスでAMPを使う

ワードプレスでAMPを使用するとする。

ポイントは、「API キーを取得する」こと。
英語のサイトに移動しての取得になるため、若干難しく感じるかもしれないが、順序通りに設定すれば簡単だ。

まず、プラグインの Akismet を有効にする。
次に、プラグインの設定でキーを取得するを選択。
英語のサイトに移動するので「GET AN AKISMET API KEY」をクリック。
ユーザー登録画面になるので、メールアドレス、ユーザー名、パスワードを入力し、サインアップ。
登録したEメールアドレス宛にメールが届くので、「Activate Account」をクリック。

ここからがポイント
API キーを取得する
金額がかかれたメニューが表示されるが、無料で使える「BASIC」を選択。
ただし、移動した後も金額が設定されているため、金額欄の下のボタンをスライドさせて「$0」になるように移動する。
そこで決定すると、キーが得られる。

あとは、プラグインの画面の設定で、上記で取得したキーを入力すれば完了。

このキーは複数のワードプレスサイトで使えるようだ。

 ワードプレスの記事を一括で下書きに戻す方法

公開した記事を「下書き」に戻したい場合、一つずつ記事を選択するのではなく、複数の記事を一括で変更したい場合がある。
そういった時は、まず下書きにしたい記事を「検索」して一覧表示する。
その後、チェックマークで変更したい記事をチェックする。
上部メニューの「一括操作」欄を「編集」に変更して適用ボタンを押す。
つぎに、メニューの中にある「ステータス」の「変更なし」を「下書き」にかえて「更新」を押せば完了。

意外とわかりにくい場所にある。

 アドセンスで掲載不可のページのみ広告をはず方法

アドセンスは特定の記事等には掲載してはいけないルールがある。
例えばアダルト系やポイントサイト関係の記事だ。
そこで、記事そのものは生かし、該当ページのみアドセンスを掲載しない方法を説明する。

wordpressプラグイン「Widget Logic」

このプラグインはすばらしい!
通常通り、このプラグインを導入して有効化すると、ウィジェット画面にメニューが追加される。
例えば、サイドバーウィジェットにテキスト等のメニューを追加して、その中にアドセンスの広告を張り付けているとしよう。上記のプラグインを導入すると、「ウィジェットのロジック」という空白が新たに追加されている。

その場所に、表示したくないページを登録することになる。

投稿ページのみ非表示にする場合
! is_single(”)

例えば、投稿ページの「point」名のページのみ非表示にしたい場合は、
! is_single(‘point’)

と記入すればいい。

固定ページのみ非表示にする場合
! is_page(”)

例えば、固定ページの「point」名のページのみ非表示にしたい場合は、
! is_page(‘point’)

と記入すればいい。

アドセンスが設定されているウィジェットのすべてに書き込めば、そのページでは表示されない。

その結果、当サイトのポイント系の固定記事にはアドセンスを非表示にすることができた。

ちなみに複数の固定ページで非表示にしたい場合は、
! is_page(array(‘point’,’harudake-point’))

つまり、複数の場合は、(array)の中に、【,】で区切って、それぞれ【”】で閉じるだけ。

複数の投稿ページで非表示にしたい場合は、
! is_single(array(‘point’,’harudake-point’))

投稿ページと固定ページの両方を非常時にしたい場合、
「&&」でつなげて表示する。

今回は、ポイントページと張るだけポイントページの2つでアドセンスを非表示にしている。

 ワードプレスのメディアライブラリをまとめて削除

使っていないファイルや間違ってアップしてしまったファイルをまとめて削除する方法。
〇月分、〇〇ファイル等で、削除したいデータを表示。
上部メニューにある「一括選択」を選ぶ。
削除したいファイルを一つずつチェックをいれる。
「選択した項目を削除」

普通に削除しようとすると、一つずつデータが開いた後に削除ボタンを押さないといけない。

 ワードプレスにPDFファイルを表示させたまま張り付ける方法

まず、ウインドウズ画面でプレビュー表示にできる方法から説明する。
「Adobe Reader DC」と関連付けされていなければ、Adobe Reader DC(無料)をインストール。

自動で関連付けされなければ、
PDFファイルを右クリック > 「プログラムから開く」 > 「別のプログラムを選択」 を選択。
インストールされている、AdobeReaderを選択し、「常にこのアプリを使って.pdfファイルを開く」 にチェック。

次に、プレヴュー設定。
AdobeReader DCを起動させ、「編集」 > 「環境設定」 を選択。
左側の 「一般」 を選択し、右側で 「Windows ExplorerでPDFサムネールのプレビューを有効にする」 にチェックを入れる。
okで完了。フォルダ等のPDFがプレビュー表示になる。

次に、ファイルをワードプレスにアップ。
メディア→メディアライブラリにファイルを追加。

次に、プラグインを導入する。
「Embed PDF Viewer」「PDF Embedder」など数種類あるので、適当に追加。

ここまでで準備完了。
記事を書く時に、上部の「メディアを追加」から記事内にデータを貼りつけると、データが表示されるようになる。
※ Missing PDF ~等アドレスが表示され、うまくプレヴュー表示されない場合は、ファイル名を変更すればうまく表示されると思う。

 ワードプレスでパーマリンク設定

ワードプレスをはじめる時に、一番初めに設定すべきこと。それはパーマリンク設定。後から変更する場合、すでに「内部リンク」がある場合変更が大変になる。手作業orプラグインで変更することになるが、上手く変更できないとエラー表示されてしまう。

パーマリンク設定は、設定→パーマリンク設定、で変更する。「カスタム構造」を確認する必要があるが、「投稿名」でもいいだろう。

カテゴリー名の設定をしておく方法は、投稿→カテゴリー、の設定。通常、名前をつけるとその名前と同じものが「スラッグ」にも登録される。例えば日本語でカテゴリー名を付けると、スラッグも日本語名。しかし日本語名のスラッグはアドレスとしてうまく表示されない。そこで、ここでスラッグを「英語」表記に変更しておく。

通常、固定ページであれば、記事を登録するときに英語表記でパーマリンクを登録すれば終わりだが、ブログの投稿記事等は、パーマリンク設定をしてないと意味不明な羅列で表示される。その表示を綺麗に表示させるための手続きが今回の方法だ。

パーマリンクはSEO対策としても必要だ。後から変更すると外部リンクもエラー表示されてしまうかもしれないため、初期でこの設定をしておく必要がある。

内部リンクを一括変更する際は、「Search Regex」というプラグインを導入する。その後、ツール→Search Regex、で設定するだけ。

イメージとしては、現在のワードで検索して、置き換えたいワードを入力、問題なければ保存、といった感じだ。

Search pattern 置き換える前のワード
Replace pattern 置き換えたいワード

Search 検索するだけ
Replace 置き換えるだけ
Replace&Save 置き換えた保存

間違わないように、慣れないときはいきなり保存せずにいったん置き換えだけをクリックして確認するようにしよう。

 ワードプレスでカテゴリーの「次のページ」がエラーになる

ブログの数が増えると「次へ」ボタンで次ページを表示するが、カテゴリーで選んだブログ記事一覧で「次へ」を押すとエラーがでる場合がある。
対処法はよくわからないが、「wp-no-category-base」というプラグインを利用すると問題が解決された。

 ワードプレスのウィジェットでリンクを作成する方法

ワードプレスでウィジェットを作成し、その中にリンク表示させたい場合、次のように記述する。

<ul>
<li><a href=”https://okanedou.com”>ここにたいとる</a></li>
</ul>

<>は半角

通常のリンクに<ul>と<li>を使う。はじまりと終わりで範囲指定するため、ulはスタートと最後に、liは使うリンクの数だけ増やす。上記は一つなのでliは一つだけ。li~/liを一セットと考え、複数ある時はリンクの数だけ増やしていく。
※範囲の終わりには「/」(スラッシュ)がついているので忘れずに。

ところで、上記の方法だとリンク先は別窓を開かないため、今現在みているサイトはそのまま、別窓表示したい場合は次の様になる。

<ul>
<li><a href=”https://okanedou.com”target=””_blank””>ここにたいとる</a></li>
</ul>

<>は半角

target=””_blank”” をリンクの後に追加することで、別窓表示になる。
自分のサイトはみてもらいたいけど、移動先もお知らせしたい場合に有効。外部リンクの設定に向いている。内部リンクで窓が表示されると邪魔なので、そこは注意しよう。

 ワードプレスのカテゴリの順番を変更する方法

プラグインである、「Category Order and Taxonomy Terms」をインストール後、投稿で追加されたメニュー「Taxonomy Order」を利用してドラッグ&ドロップで移動させるだけ。

簡単なので、興味がある人はさっそく導入してみることをおすすめする。

 CSSの設定方法の記述をちょっと綺麗に書く方法

現在当サイトでも利用しているのは、【WP Code Highlight.js】というプラグイン。
これを使うと、下記の様になる。



【pre】【code】



【/code】【[/pre】

【】 ← これは半角の<> に変更
そうすると上記のような枠ができる。

色等は適当に。

 ワードプレスの固定ページの編集画面に「次へ」「前へ」ボタンを作成する方法

固定ページを編集するさい、すべてのページを修正するため、編集画面に「次へ」ボタンがあれば便利。

そんな時は、プラグイン「admin post navigation」を導入しよう。
編集画面に「次へ」ボタンが表示されるようになるので、固定ページの修正を保存したあとに、いちいち元の画面に戻らず次の固定ページを編集することができる。

 ワードプレスを「https」にする

httpsがつかえても、ワードプレスの設定を替えないとhttp:のまま。

設定→一般 ワードプレスアドレス、サイトアドレスのhttp→httpsを変更

フォローする