WordPress アーカイブ - nyanblog ~にゃんぶろぐ~ https://nyanblog2222.com/category/webproduction/wordpress/ ちょっとしたことを調べているよ Sun, 15 Jan 2023 08:23:33 +0000 ja hourly 1 https://wordpress.org/?v=6.7 https://nyanblog2222.com/wp-content/uploads/2021/09/cropped-favicon-32x32.png WordPress アーカイブ - nyanblog ~にゃんぶろぐ~ https://nyanblog2222.com/category/webproduction/wordpress/ 32 32 【WordPress】サイトにデモページを貼りたい！【作り方】 https://nyanblog2222.com/webproduction/wordpress/1157/ https://nyanblog2222.com/webproduction/wordpress/1157/#respond Wed, 11 Aug 2021 23:32:33 +0000 https://nyanblog2222.com/?p=1157 プログラミング言語やWordPressやら、動きを確認するデモページを別ページで表示させているサイトありますよね！ 今回デモページを作成するにあたり、方法を調べたので大きく3つの手順でご紹介します♪ 目次 デモページの用 […]

投稿 【WordPress】サイトにデモページを貼りたい！【作り方】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

プログラミング言語やWordPressやら、動きを確認するデモページを
別ページで表示させているサイトありますよね！

今回デモページを作成するにあたり、方法を調べたので大きく3つの手順でご紹介します♪

デモページの作成手順

１．デモページを作成

２．作成したフォルダごと「ドメイン」直下、もしくは「ドメイン/wordpress」直下にあげる

３．記事にリンクを張り付ける

デモページの用意

まずはデモページを準備します。

フォルダを用意し、その中にデモページのファイルを準備します。

demo1フォルダに
　js/script.js
　css/style.css
　index.html
を準備してみてください。

試しなのでindex.htmlだけでも大丈夫です。

分かりやすく、画像にしてみました！

デモページのファイル構成

デモページのサンプル

試しにやってみたいという方は
こちらのコードをコピーして使用してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デモサンプル</title>
    <meta name="viewport" content="width=device-wisth,initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!--[if lt IE 9]>
<script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
</head>
<body>
    <div>
        <p>デモサンプルです。</p>
        <p>表示させてみましょう！</p>
    </div>
</body>
</html>

style.css

@charset "utf-8";
p {
    // テキストを中央配置
    text-align: center;
}

script.js

window.onload = function() {
    // コンソール画面に"hello world!!"を表示
    console.log("hello world!!")
}

サーバにファイルをアップする

今回サーバへのファイルアップロードにはffftpのソフトを使用しています。

アップロードができれば、どのソフトを使用してもOKですし、
サーバ会社の管理画面よりファイルをアップしても問題ありません！

デモを配置する親フォルダを作成

デモを配置する親フォルダをWordPressがインストールされているフォルダ直下に作成します。

画像で表示されているフォルダやファイルを参考に場所を見つけてください。

初期設定にもよりますが、ドメイン直下もしくはWordPressフォルダ直下にあることが多いです。

また、「wp-admin」「wp-content」「wp-includes」のフォルダや
「.htaccess」「index.php」のファイルがあるフォルダと考えると見つけやすいです。

demoフォルダ作成

今回は「demo」というフォルダを作成しています。

親フォルダにデモファイル一式をアップロードする

続いて、先ほど作成した「demo」フォルダに「demo1」フォルダ毎アップロードします。

demo1フォルダ作成

「demo」フォルダに複数のデモが格納されるイメージです。

デモの配置イメージ

デモページの表示

先ほどアップロードしたデモページをさっそく確認してみましょう。

デモページのリンクの貼り方

htmlに実際にリンクを貼ってみましょう。

「リンク」をクリックし、URLを設定します。

URLは
https://[ドメイン]/[デモの親フォルダ]/[デモのフォルダ]/
のように設定してください。
※ 例：https://nyanblog2222.com/demo/demo1/

デモページのリンクの設定

デモページの確認

こちらのページから先ほど設定したデモページを確認することができます。

デモページ

まとめ

いかがでしたでしょうか。

簡単に作ることができますが、
デモページのファイルをどこに置けばいいのか悩んだので今回は記事にしてみました。

一度親フォルダを作成しておけば
次からも同じように3つの手順でデモページを引き続き作成することができます。

デモページの作成手順

１．デモページを作成

２．作成したフォルダごと「ドメイン」直下、もしくは「ドメイン/wordpress」直下にあげる

３．記事にリンクを張り付ける

良かったら参考にしていただければ嬉しいです！

最後までご覧いただき、ありがとうございました♪

投稿 【WordPress】サイトにデモページを貼りたい！【作り方】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/1157/feed/ 0 【体験談】２年半リトルサーバーを使ってみた【WordPress】 https://nyanblog2222.com/webproduction/3442/ https://nyanblog2222.com/webproduction/3442/#respond Tue, 13 Jul 2021 12:27:11 +0000 https://nyanblog2222.com/?p=3442 今回は、リトルサーバー「リトルプラン」を２年半使用した体験談（現在も利用中）や、他社との比較等を紹介します。 目次 リトルサーバーとは優れているポイント価格・性能面から他サーバーとの比較実際に使ってみた感想良いところ　格 […]

投稿 【体験談】２年半リトルサーバーを使ってみた【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

今回は、リトルサーバー「リトルプラン」を２年半使用した体験談（現在も利用中）や、
他社との比較等を紹介します。

リトルサーバーとは

リトルサーバーは、驚異的な低価格と、平均以上の性能を備えた
コストパフォーマンスを徹底追及したレンタルサーバーです。

優れているポイント

公式のおすすめポイントより、
私がWordPressサイトを運営する上で良いと思うものを抜粋してみました！

  • 高速化設定＋SSD採用＋http/2の軽快サーバー
  • WordPressが使え、最短ワンクリック「超簡単インストール」に対応
  • 月額料金は150円～430円（公式おすすめプランは250円）
  • 20日間の無料お試し期間あり
  • シンプルなコンパネで簡単に設定が可能
  • 独自ドメインが無制限で設定可能
  • 独自SSLが完全無料で利用可能
  • 自動バックアップも標準搭載！
    毎日自動でデータのバックアップを7世代まで取得、復元は無料

価格・性能面から他サーバーとの比較

公式に書かれている性能表から、
他の低価格レンタルサーバーと比べると以下の通りとなりました。

・比較するレンタルサーバー、プラン

レンタルサーバプラン
さくらのレンタルサーバスタンダード
ColorfulBoxBOX1
ロリポップスタンダード
コアサーバーCORE-MINI
リトルサーバーリトルプラン

・比較結果
金額面では、コアサーバ・リトルサーバー、
性能面では、ColorfulBox・リトルサーバーが優秀！

このことから、
リトルサーバーが格安サーバの中ではコスト・性能面の両方で最も優れていることが分かりますね♪
比較内容の詳細は以下を参照ください。

コスパ最高！WordPress可の低価格帯レンタルサーバ比較
今回はWordPress可の低価格帯レンタルサーバをご紹介します。レンタルサーバとは、その名の通りサーバを貸し出すサービスです。Webサイトをお店に例えると、土地は「レンタルサーバ」、お店作成ツールが「WordPress」、お店にたどり着くための住所が「ドメイン」といったところでしょうか。今回はWordP...
nyanblog2222.com
2020.05.04

逆に他より劣っている点は、やはりマイナーで使用しているユーザーが少ないところでしょう。

本当に使って問題ないのかな……？

と気になる方も多いと思いますので、私が実際に２年半使ってみた感想を次から紹介します♪

実際に使ってみた感想

結論から言うと、安かろう悪かろうの部分はありますが、ほぼ問題なく使えています。
早くて安いので、ある程度リスクを許容できるのであれば、とてもコスパ良いです！

良いところ　格安なのに高性能！

金銭面

私は「リトルプラン」を年間契約していますが、
価格面はとても優秀で、3300円／年以上取られることはありません。
更新も自動更新にしていますが何不自由なく更新できました。
領収書もお願いしたらもらえます。
（連絡すると自動で受け取ることも可）

性能面

・WordPressインストールなど設定面
コントロールパネルから簡単にインストールや設定ができます。

・速度
閲覧していて全く違和感のない速度です。
本サイトは現在でもリトルサーバーを使用しているため、体感できるかと思います。

・容量等
全く気にしなくていい程度には大容量で、特に不自由はありません。

障害やメンテナンス、サポート体制について

２年間の間で障害は、すべてのサーバー（３つ）で合わせて６回起きており、
１時間程で収束しています。
対策していても障害は稀に起きることなので、支障がないレベルかと思います。

メンテナンスについては、
平日の深夜に実施されるため、あまり気になることはありません。

サポートについては、問い合わせフォーム起点でのメールサポートのみですが、
平日休日問わず、30分以内に返信が来ますのでストレスはありません。
回答は真摯で的確な印象です。

悪いところ　トラブルが稀にあり

とにかく格安で高性能なのですが、一部安かろう悪かろうの部分もあります。

発生したトラブル

格安なのである程度は仕方がないですが、この２年間で以下のような問題が生じました。

一応、問い合わせすることですべて解決できましたが、
気になる方は多いかもしれません。

・PHPのモジュール版を使うとサイトへのアクセスエラーが起きた
→問い合わせしたところ、速度に遜色のないFastCGIを勧められ、使用することになりました。

【Wordpress】「このサイトにアクセスできません　接続がリセットされました」
そのエラー、PHPの設定かもしれません！Wordpress管理画面やWebサイトにアクセスする際に「このサイトにアクセスできません　接続がリセットされました」というエラーが頻繁に発生する際の対処方法を紹介します♪
nyanblog2222.com
2020.06.17

・Bingウェブマスターツールに登録できなかった
→問い合わせしたところ、いろいろと試してもらい、登録できるようになりました。
　担当者が言うには、偶然直ったためなぜ直ったのかわからないようでした。

・突然の障害に巻き込まれて、ブログが見れなくなった
　→問い合わせしたところ、すぐ直してもらえました。

物足りないところ

・サーバーが冗長化されていない
障害やメンテナンスがある際はサイトが使えなくなります。

最後に

以上、メリットやデメリット等紹介しましたが、
結論、稀にあるトラブルを許容できれば、コスト・性能面の両方で優れたサーバーです！

ちなみに個人でWordPressサイトを運営するなら、
WordPress高速化が使える「ワードプラン」と「リトルプラン」がおすすめです♪

投稿 【体験談】２年半リトルサーバーを使ってみた【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/3442/feed/ 0 【WordPress】「このサイトにアクセスできません　接続がリセットされました」 https://nyanblog2222.com/web-all/1308/ https://nyanblog2222.com/web-all/1308/#respond Wed, 17 Jun 2020 09:00:00 +0000 https://nyanblog2222.com/?p=1308 こんにちは。レンタルサーバー仮登録時から先日まで、WordPress管理画面及びWebサイトにアクセスする際に「このサイトにアクセスできません」 というエラーが頻繁に発生しており困っていましたが、対処方法がやっと分かりま […]

投稿 【WordPress】「このサイトにアクセスできません　接続がリセットされました」 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

こんにちは。レンタルサーバー仮登録時から先日まで、WordPress管理画面及びWebサイトにアクセスする際に
「このサイトにアクセスできません」
というエラーが頻繁に発生しており困っていましたが、対処方法がやっと分かりましたので紹介します。

レンタルサーバーは「リトルサーバー」で、使用ブラウザは「Google Chrome」です。もし同じ事象で困っている方がいらっしゃったら、試してみてください！

エラー内容

仮登録時から現在に至るまで、Wordpress管理画面及びWebサイトにアクセスする際に以下の画像のように
「このサイトにアクセスできません　接続がリセットされました。」
というエラーが頻繁に発生していました。

このサイトにアクセスできません

常に上記のエラーが出るわけではありませんが、Webサイトにアクセスする際によく出て、
エラーが出てから時間を待つ・もしくは再読み込みすると正常に見れるような状態でした。

そこで色々と試してみたところ、
・パソコン・スマートフォンどちらからのアクセスでもエラーが出ている
・スマートフォンのWifiを切って、携帯回線でアクセスしてもエラーが出る
・Webサイトのドメイン宛に「ping nyanblog2222.com /t」で送信しても
　特にネットワークの途切れはなし
・他サイトを閲覧している際はエラーが発生しない
　→同じレンタルサーバーを使用しているWebサイトもエラーは発生しない

ということが分かり、パソコンやネットワークに依存するトラブルではないことが分かりました。

つまり問題の要因は、
サーバの設定、もしくはサイトが保存されているサーバ側の不具合？
ということで、レンタルサーバー側に上記旨の問い合わせをしました。

対処方法

レンタルサーバー側からの問い合わせ結果は以下です。

・PHPのモジュール版からPHPバージョンを7.3（CGI版）にする
モジュール動作は高速かつ多数同時アクセスには優れているが、現象『再読み込みすると正常に見れるようになる』際は、最新安定版のPHP7.3にすることでエラーを回避できる事がある。
リトルサーバー（使用しているレンタルサーバー）の場合、この設定でFastCGIが有効になるため現在より安定したWEBサイト表示が可能。
また、php7.2以上であればFastCGIもモジュール版と遜色ない高速性が保持される。

バージョンの設定

この返答があったため、PHPバージョンを7.3にしたところ、
なんと大幅に改善！　全くエラーは出なくなりました。

そこで、PHPのモジュール版とCGI版について調べてみたところ以下が分かりました。

・モジュール版
処理実行：データベース側
処理速度：高速
サーバのRootユーザーで実行するため、セキュリティ性・安定性に難あり

・CGI版
処理実行：クライアント側
処理速度：モジュール版に比べ遅いとされるが、
　　　　　高速処理可能なFastCGIを使えば、モジュール版と遜色なし
クライアント毎に別ユーザーで実行するため、セキュリティ性・安定性問題なし

以上から、あくまで想像ではありますが、
今回エラーが起きた要因は、１つのレンタルサーバーに対して使用するユーザが多かったためかもしれません。

ただこれが事実だとしても、以下の記事でも紹介していますが、
コストパフォーマンスが他社に比べ圧倒的に高いため、本サイトではレンタルサーバーはリトルサーバーが一番お勧めです。

今回のことにしてもFastCGIを使うことで、現状何の問題もなくサイトにサクセスが可能です。

コスパ最高！WordPress可の低価格帯レンタルサーバ比較
今回はWordPress可の低価格帯レンタルサーバをご紹介します。レンタルサーバとは、その名の通りサーバを貸し出すサービスです。Webサイトをお店に例えると、土地は「レンタルサーバ」、お店作成ツールが「WordPress」、お店にたどり着くための住所が「ドメイン」といったところでしょうか。今回はWordP...
nyanblog2222.com
2020.05.04

むしろ、問い合わせに対しても早急に的確な対応をしてくださいますので、非常に安心できる会社であることが分かりました。
（30分程で返信があり、とても迅速な対応でした。）
今後も使用していきたいレンタルサーバだと感じました。

投稿 【WordPress】「このサイトにアクセスできません　接続がリセットされました」 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/web-all/1308/feed/ 0 【Duplicate Post】記事複製プラグインの使い方【WordPress】 https://nyanblog2222.com/webproduction/wordpress/823/ https://nyanblog2222.com/webproduction/wordpress/823/#respond Fri, 22 May 2020 09:00:00 +0000 https://nyanblog2222.com/?p=823 こんにちは。ワンクリックで記事を新規複製ができる操作ができると便利だと思いませんか？今回はそんなことができるプラグイン、Duplicate Postを紹介します。 目次 プラグインのインストールプラグインの使って記事を複 […]

投稿 【Duplicate Post】記事複製プラグインの使い方【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

こんにちは。ワンクリックで記事を新規複製ができる操作ができると便利だと思いませんか？
今回はそんなことができるプラグイン、Duplicate Postを紹介します。

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

まずはプラグインをインストールしてみましょう。
ダッシュボードから、「プラグイン」→「新規追加」をクリックしましょう。

ダッシュボードから新規作成をクリック

右上の「プラグインの検索…」に「Duplicate Post」を入力しましょう。

Duplicate Postを入力

入力して少しすると、一覧が出力されるので、「Duplicate Post」の「今すぐインストール」をクリックします。

今すぐインストールをクリック

インストールが終わったら、「有効化」をクリックしましょう。

有効化をクリック

これで準備は終わりました。

プラグインの使って記事を複製

さっそくプラグインを使って記事を複製してみましょう。
ダッシュボードから「投稿」をクリックし、既存のページをマウスオーバーしてみましょう。
「複製」と「新規下書き」が新しく追加されていることが確認できます。

複製と新規下書きの表示確認
  • 複製
    投稿ページの記事を複製し、下書きの状態で保存されます。
  • 新規下書き
    同様に複製し下書きの状態で保存されますが、複製と異なるのは編集ページに移動することです。

「複製」をクリックしてみましょう。

複製をクリック

このように、投稿一覧に記事が複製されています。

複製完了後の画面

次に「新規下書き」をクリックしてみましょう。

新規下書きをクリック

編集ページに飛び、右上に「下書き保存」、「公開」が表示されており、下書き状態になっていることが分かります。
※ 公開状態の場合は「下書きに切り替え」、「更新」と表示されています。

新規下書き後の画面

プラグイン設定の変更

複製の内容について、設定で変更することができます。
ダッシュボードの画面から、「設定」→「Duplicate Post」をクリックします。

ダッシュボードから複製を設定

設定画面の中には3つのタブで設定することができます。
それぞれ箇条書きで説明していきますので、必要があれば設定を変更してください。

複製元タブ

複製元設定
  • 複製する投稿/ページの要素
    複製する時にコピーしたい内容にチェック
  • タイトルの接頭辞
    複製した記事のタイトルの先頭に文字を設定
  • タイトルの接尾辞
    複製した記事のタイトルの末尾に文字を設定
  • メニュー順を増加する数
  • 複製しないカスタムフィールド
    フィールドを複製しない場合、カンマで区切って設定
  • 複製しないタクソノミー
    タクソノミーを複製しない場合、チェック

権限タブ

権限の設定
  • 複製可能な権限
    複製作業ができるユーザの権限をチェック
  • これらの投稿タイプに対して有効化
    複製できるページの種類をチェック

表示タブ

表示設定
  • リンクを表示する場所
    「複製」「新規下書き」を表示させる場所にチェック
  • 複製元を表示
    複製元を表示させる場合、表示させたい場所にチェック
  • 更新通知を表示する
    更新通知を届ける場合チェック

まとめ

今回はWordPressのプラグインを使って、複製をワンクリックで楽に行えるようになりました。
とても使いやすいので、ぜひインストールして試してみてください。

また、インストールですが、ダウンロードからも行うことができます。
その場合はこちらのサイト「WordPress.ORG Duplicate Post」からインストールをしてみてください。

投稿 【Duplicate Post】記事複製プラグインの使い方【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/823/feed/ 0 【WordPress】プラグインでパンくずリスト【Yoast SEO】 https://nyanblog2222.com/webproduction/wordpress/662/ https://nyanblog2222.com/webproduction/wordpress/662/#respond Tue, 19 May 2020 09:00:00 +0000 https://nyanblog2222.com/?p=662 こんにちは。皆さん、パンくずリスト（Breadcrumbs list）は表示させていますか？今回は、パンくずリストの説明と実際の設置方法について、ご紹介します。 目次 パンくずリストとは？パンくずリストのメリットユーザが […]

投稿 【WordPress】プラグインでパンくずリスト【Yoast SEO】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

こんにちは。皆さん、パンくずリスト（Breadcrumbs list）は表示させていますか？
今回は、パンくずリストの説明と実際の設置方法について、ご紹介します。

パンくずリストとは？

パンくずリストはWebサイト内で自分が今閲覧しているページがどこにいるか、視覚的に分かりやすく表示させているもののことです。

パンくずリスト

具体的にはこのページの上部にも表示されていますね。
このように、ページを階層順にリストアップして設置させたリストのことで、コンテンツの上部に良く見られます。

パンくずリストのメリット

パンくずリストを設置することで、何が良くなるのでしょうか？
大きく2つほどメリットがあります。

  • ユーザが自分の位置を瞬時に判断できる
  • SEO上の効果として期待できる

ユーザが自分の位置を瞬時に判断できる

ナビゲーションやページ数が膨大なサイトでは、サイトを動き回っているうちに自分がどこのページを閲覧しているのか、分からなくなってしまうことがあります。
その場合にパンくずリストが設置してあるサイトでは、迷うことなく自分がどのカテゴリにいて、どのページから閲覧しているのか、見ただけで理解することができます。
もし居場所が分からない場合、見てほしいページを見る機会が減ってしまったり、滞在時間が減る可能性があります。

また、階層を複数戻したい場合など、ワンクリックで複数階層戻ることができるので、サイトを効率的に閲覧することができますね！

SEO上の効果として期待できる

検索エンジンに見つけてもらうには、サイトの情報をクローリング（巡回して情報を収集）してもらう必要があります。
そのためには、サイト構造を分かりやすい状態にしておく必要があります。
パンくずリストを設置することで、サイトの階層が整理されている状態であり、クローラー（巡回するロボット）がサイト構造を理解しやすくなることで、SEO上の効果として、期待することができます。

検索エンジン最適化（SEO）スターター ガイド でも説明がありますので、一度見ておくと、パンくずリストを設置するときの注意点も把握することができます。

パンくずリストの設置方法

続いて、パンくずリストの設置方法について、ご紹介します。
今回は【Yoast SEO】プラグインを使用しました。

Yoast SEOのインストール

Yoast SEOをインストールします。
ダッシュボードから、「プラグイン」→「新規作成」をクリックします。

プラグインインストール

「プラグインの検索…」に「Yoast SEO」を入力します。

YoastSEO検索

「今すぐインストール」をクリックします。

今すぐインストール

インストールが無事終わったら、「有効化」をクリックして、インストールは終わりです。

Yoast SEO　有効化

有効化すると、メニューに「SEO」が表示されます。

Yoast SEO　表示

パンくずリストの設定

パンくずリストを有効化して設定しましょう。
メニューから、「SEO」→「検索での見え方」をクリックします。

ダッシュボード　検索の見え方

検索の見え方ページから、「パンくずリスト」タブをクリックします。

パンくずリストタブクリック

パンくずリストの設定が表示されますので、「パンくずリストを有効にする」欄を「有効」に変更するため、クリックしてください。

パンくずリスト有効

すると、色々な設定値が表示されます。
お好みで設定しておけば問題ないのですが、今回はデフォルトから赤枠欄を変更しています。
その中でも、「コンテンツタイプのパンくずリストに表示するタクソノミー」はサイト構成が分かりやすくなるため、設定しておいた方が良いです。
設定値のおすすめは「カテゴリー」です。
設定が終わりましたら、「変更を保存」をクリックしましょう。

パンくずリスト設定

パンくずリストの設置

パンくずリストの準備が終わりましたので、実際に設置してみましょう。
自身のない方はあらかじめバックアップを取ることをおすすめします。
また、編集は自己責任でお願いします。
こちらのコードをパンくずリストを表示させたいところに設定します。

<!--パンくずリスト-->
<?php
if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

設定するファイルの編集方法についてご説明します。
ダッシュボードから、「外観」→「テーマエディター」をクリックします。

外観からテーマエディタを選択

変更するファイルを選択しますが、どのページに設置したいかで設定するファイルが異なります。
設置場所はテーマにより異なりますのが、初心者の方は「Theme Header（header.php）」のみに追加すると、分かりやすいと思います。

設定ができましたら保存し、パンくずリストが出力されていることを確認してください。

パンくずリスト出力

ここまでできましたら、あとは見た目の変更を行いましょう！

パンくずリストのスタイルを変更

パンくずリストのスタイルを変更しましょう。
リスト全体の指定は「p#breadcrumbs」、リスト内のリンクの指定は「p#breadcrumbs a」で行います。

/*パンくずリスト 全体*/
p#breadcrumbs {
    padding: 1rem 2rem 0;
    font-size: 0.8rem;
}

/*パンくずリスト リンク*/
p#breadcrumbs a{
    color: #b78d4a;
}

h1でページの題名を出力しているので現在出力しているページ名は不要だ。ということであれば、「span.breadcrumb_last」で「display: none」を設定することで出力を無くすことができます。

/*パンくずリスト 最後*/
span.breadcrumb_last{
    display: none;
}

設定後の表示はこちらです。それっぽい見た目になりましたね。
色や幅の指定はサイトのデザインに応じて変更してください。

パンくずリスト　スタイル変更後

他にも色々設定できますので、試してみてください。
ただ、画像も指定できますが、パンくずリストはSEO的にテキストを推奨しているため、画像は使わない方が良いでしょう。

まとめ

今回はパンくずリストについての説明と設置方法について、ご紹介しました。

ホームページを運営する上でSEOは意識しなくてはならないところだと思います。
今回はプラグインを使用したので、比較的簡単な方法で実装することができました。
ぜひ試してみてください！

投稿 【WordPress】プラグインでパンくずリスト【Yoast SEO】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/662/feed/ 0 【WordPress】更新日を取得し、表示する方法【簡単コピペ】 https://nyanblog2222.com/webproduction/wordpress/505/ https://nyanblog2222.com/webproduction/wordpress/505/#respond Thu, 14 May 2020 09:00:00 +0000 https://nyanblog2222.com/?p=505 私たちがWebで検索するとき、何気なくスニペットの日付やページの更新日時を確認しませんか？特に情報関係の検索する時は、より新しい情報を得たいですよね！そこで、今回は更新日時を表示する方法をご紹介します。このような表示をし […]

投稿 【WordPress】更新日を取得し、表示する方法【簡単コピペ】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

私たちがWebで検索するとき、何気なくスニペットの日付やページの更新日時を確認しませんか？
特に情報関係の検索する時は、より新しい情報を得たいですよね！
そこで、今回は更新日時を表示する方法をご紹介します。
このような表示をします。

投稿日、更新日の出力確認

phpファイルを編集しますので、編集前にファイルのバックアップは取っておきましょう！
今回はこちらのファイルを編集しました。

１．関数を追加
・functions.php

２．投稿日、更新日を表示させる
・home.php
・loop-content.php
・search.php
・single.php

３．スタイルの変更
・header.php
・style.css

本記事は本ブログで利用している自作テーマを変更して対応しています。
コードを追加する場所さえ注意していれば、コピペで同じ内容を対応することができます。

関数を追加

まずはfunctions.phpに関数を追加します。
表示させるだけであれば関数の追加は不要なのですが、予約投稿した時や投稿後一度も更新されない時など、更新日が投稿日以前の場合、更新日を表示させないようにします。

更新日が投稿日より新しい日付かどうかをチェックする関数を追記しました。

function is_new_modified_date($format) {
    $ptime = get_the_time('Ymd');
    $mtime = get_the_modified_time('Ymd');
    return $mtime > $ptime;
}

投稿日・更新日を取得し、表示させる

投稿日と更新日を表示させるコードを追加します。
対象ファイル　single.php
※ 最終的に4ファイルとも同じ内容を記載していますが、想定通りの出力が確認できるまで、single.phpファイルのみ変更をしていきましょう。

<!--投稿日を表示-->
<span class="article-date">
    <i class="fa fa-calendar"></i>
    <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
        <?php echo get_the_date(); ?>
    </time>
</span>

<!--更新日を表示-->
<span class="article-date">
    <?php if (is_new_modified_date('Y-m-d')) : ?>
    <i class="fa fa-redo"></i>
    <time datetime="<?php echo the_modified_date( 'Y-m-d' ); ?>">
        <?php echo the_modified_date(); ?>
    </time>
    <?php endif; ?>
</span>

投稿日、更新日の表示について、詳しく説明します。

・2、10行目　<span class=”article-date”></span>
日付を出力する枠組を設定します。classはcssでスタイルを設定します。

・3行目　<i class=”fa fa-calendar”>
　12行目　<i class=”fa fa-redo”>
日付の左側にある、アイコンを設定しています。
スタイルの変更で詳しく説明します。

・4～6行目
　<time datetime=”<?php echo get_the_date( ‘Y-m-d’ ); ?>“>
　　<?php echo get_the_date( ‘Y-m-d’ ); ?>
　</time>
get_the_date( ‘Y-m-d’ );で取得した投稿日付を出力し、timeタグのdatetime属性で日付の情報を設定しています。

・11行目、16行目
　<?php if (is_new_modified_date( ‘Y-m-d’ )) : ?>
　<?php endif; ?>
先ほどfunction.phpで設定した関数を使って更新日が投稿日より新しい日付かどうかをチェックしています。
新しい日付であれば、12～15行目のソースを実行します。

・13～15行目
　<time datetime=”<?php echo get_the_modified_date( ‘Y-m-d’ ); ?>“>
　　<?php echo get_the_modified_date( ‘Y-m-d’ ); ?>
　</time>
get_the_modified_date( ‘Y-m-d’ );で取得した更新日付を出力し、timeタグのdatetime属性で日付の情報を設定しています。

スタイルの変更

アイコンの設定

まずはアイコンを設定するため、リンクを設定します。
今回は「FontAwesome」を使用しています。
ファイル　header.phpのheadタグにアイコン設定用のリンクを設定します。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

出力させたい場所にiタグとクラスを設定するだけで、簡単にアイコンを設定することができます。
こちらの記事がクラスを設定したタグまで準備してくれるので、おすすめさせていただきます。
「Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方」

今回は
　<i class=”fa fa-calendar”>
　<i class=”fa fa-redo”>
を使用しました。

iタグを使わず、cssで設定することも可能です。
その場合はiタグは除き、疑似要素 [before]でスタイルを設定します。
以下は投稿日の例です。

<span class="article-date">
    <time class="date" datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
        <?php echo get_the_date(); ?>
    </time>
</span>
.article-date .date::before{
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    content: "\f133";
    display: inline-block;
}

スタイルの設定

ファイル　style.cssに article-dateクラスのスタイルを設定していきます。
本ブログのスタイルで設定していますが、この辺りはお好みでカスタマイズしてみてください！

.article-content .article-info .article-date {
    font-size: .8rem;
    display: inline-block;
    margin-right: .5rem;
    color: #888;
}

.article-list .text .article-date{
    font-size: .75rem;
    display: inline-block;
    margin: 0 .5rem .5rem 0;
    color: #888;
}

ここまで設定できましたら、投稿ページに投稿日と更新日が出力されていることを確認してみましょう。

他のphpファイルへコードをコピー

投稿ページの確認ができましたら、
・home.php
・loop-content.php
・search.php
へコードを反映し、
「トップページ」、「検索ページ」、「カテゴリページ」等、投稿日と更新日が出力されていることを確認してください。

まとめ

今回は投稿日と更新日の出力できるように変更してみました。
アイコンも簡単に変更できるので、ぜひ試してみてください！

ちなみに、冒頭にスニペットの日付について触れましたが、Googleで自動で日付を設定しているため、指定することはできません。
詳しくは「ウェブページの最適な日付を Google 検索に知らせるには」を確認してみてください。

投稿 【WordPress】更新日を取得し、表示する方法【簡単コピペ】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/505/feed/ 0 「wwwあり/wwwなし」を統一する方法【WordPress】 https://nyanblog2222.com/webproduction/wordpress/246/ https://nyanblog2222.com/webproduction/wordpress/246/#respond Tue, 05 May 2020 07:21:11 +0000 https://nyanblog2222.com/?p=246 wwwありなしを統一させていますか？URLにはwwwがあるものとないものがあります。そもそもwwwとは何でしょうか。 目次 wwwとは？URLの表示確認サブドメインの追加方法wwwありなしを統一する.htaccessとは […]

投稿 「wwwあり/wwwなし」を統一する方法【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

wwwありなしを統一させていますか？URLにはwwwがあるものとないものがあります。そもそもwwwとは何でしょうか。

wwwとは？

wwwとは、「World Wide Web（ワールド ワイド ウェブ）」の略称で、インターネット上で提供されているハイパーテキストシステムです。
URLについているwwｗについては、もう少し意味があり、「インターネットのホームページの閲覧機能を提供しているサーバを識別するために一般的に使われる名称」を意味しています。

昔はスペックの関係でサーバを分けて運用することが多く、wwwはweb用のサーバとして利用されており、現在はwwwがあるのとないのと、どちらでもSEO的には影響がないといわれています。

ただ、wwwがついているURLとついていないURLが両方存在するのは重複ページとして認識されてしまうので、SEO的にマイナス評価となってしまいます。そのため、どちらかに統一させる必要があります。

こちらはhttpからhttpsへリダイレクトする方法をご説明いたしましたので、併せてこちらもご欄ください。

【WordPress】httpからhttpsへリダイレクトする方法【サンプル】
リダイレクトとは 移転や閉鎖、URLが変更されたWebページに訪れたユーザに対し自動的に別のWebページへ転送することです。別のURLで同じ内容のページが複数存在する場合、SEOとしては同じサイトとして扱われずSEO評価が分散されてしまいます。
nyanblog2222.com
2020.04.27

URLの表示確認

まずはwwwがあり・なしとで、どちらもサイトが表示されていることを確認してください。表示されていればこの項目は飛ばしてください。
表示されていない場合、wwwなしドメインと、wwwありのサブドメインの両方を追加されていることを確認してください。
・wwwなしドメインを追加する。
・www付きサブドメインを追加する。（サブドメインのパスをドメインと同じパスに設定すること。

サブドメインの追加方法

ここでは、Little Server（リトル サーバー）でのサブドメイン追加を説明いたします。

コントロールパネルから「ドメイン設定」をクリックします。

ドメイン・サブドメインにwwwありのドメイン追加し、パスにはwwwなしのパスと同じパスを設定します。
画像をクリックするとLittle Server（リトル サーバー）のマニュアルに飛びます。

忘れないよう、サブドメインに対してもSSL対応しておきましょう。
サブドメインのURLページを表示されることを確認して、完了です。

wwwありなしを統一する

リダイレクトを行ってwwwありなしを統一していきます。
wordpressフォルダの「.htaccess」ファイルを編集していきます。

.htaccessとは

.htaccessとは、Webサーバの動作を制御するための設定ファイルです。
このファイルの設定を変更するだけで、特定のファイルやディレクトリのアクセスを禁止したり、エラーページをカスタマイズすることもできます。
セキュリティ面の観点から設定する方がいいですね。

さっそく設定してみましょう。コピーされる場合は、ドメイン名の箇所のみ変更をお願いします。

■wwwありに統一

RewriteEngine on
RewriteCond %{ HTTP_HOST} ^sample\.com
RewriteRule ^(.*)$ https://www.sample.com/$1 [L,R=301]

■wwwなしに統一

RewriteEngine on
RewriteCond %{ HTTP_HOST} ^www.sample\.com
RewriteRule ^(.*)$ https://sample.com/$1 [L,R=301]

あらかじめファイルがある場合は、ファイル上部に追記してください。
ファイルの有無はwordpressフォルダの直下確認してみると、分かります。

これでwwwあり、なしの統一をすることができました。
SEO対策はまだまだ勉強中ですが、他にも設定があればまた記事をご紹介します。

投稿 「wwwあり/wwwなし」を統一する方法【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/246/feed/ 0 【Contact Form 7】お問い合わせフォーム作成方法【WordPress】 https://nyanblog2222.com/webproduction/108/ https://nyanblog2222.com/webproduction/108/#respond Fri, 01 May 2020 05:54:24 +0000 https://nyanblog2222.com/?p=108 WordPressでお問い合わせフォームを作成したい。と考えたことはありませんか？今回は「Contact Form 7」プラグインを使用してお問い合わせフォームを作成してみようと思います。 お問い合わせフォームのメリット […]

投稿 【Contact Form 7】お問い合わせフォーム作成方法【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

WordPressでお問い合わせフォームを作成したい。と考えたことはありませんか？今回は「Contact Form 7」プラグインを使用してお問い合わせフォームを作成してみようと思います。

お問い合わせフォームのメリットについて、1番はユーザが手軽に送信できることです。営業時間を気にせず、好きなタイミングで直接話すことなく問い合わせることができます。
他にも運営側にとっても、メールアドレスを非公開にできたり、必要な情報を入手できます。

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

まずは「Contact Form 7」をインストールしてみましょう。
ダッシュボードから、「プラグイン」→「新規追加」をクリックしてください。

プラグインの検索で「Contact Form 7」を入力して、「今すぐインストール」をクリックしてください。

インストールが終わりましたら、「有効化」をクリックしてください。

これで事前準備となるインストール、有効化の完了です。

お問い合わせフォームを作成

今回はこんな感じのお問い合わせフォームを作成しようと思います。

コンタクトフォームの追加

有効化まで終わると、メニュー内に「お問い合わせ」の項目が出てきますので、クリックしてください。

今回は新しくフォームを作成するので、コンタクトフォームの右側か、メニューの「新規追加」をクリックしてください。

新規追加の画面は以下のようになってます。
まずは、「ここにタイトルを入力」のところにタイトルを入力します。
今回は「お問い合わせ」と入力しています。

フォームタグの変更

次に「フォーム」タグでお問い合わせの際に入力してもらう欄を作成します。
あらかじめ入力されているものを使用しても問題ありません。
今回はお問い合わせの内容について、選択形式の入力を追加したいので、追加したい場所にカーソルの位置を合わせ、「ドロップダウンメニュー」をクリックします。

クリックすると、下のような画面が出てくるので、それぞれ必要に応じて入力してください。
１．必須項目にしたい場合はチェックをつけてください。
２．ドロップダウンメニューの名前を一意で入力してください。デフォルトのままでも問題ありません。
（WordPressのクエリーが使用するパラメーターと同じ名前は使用できません。詳しくは「コチラ」から確認してください。）
３．選択リストを入力してください。
　　※ 複数項目を追加する場合、改行してください。
　　例）ご意見、ご提案について
　　　　記事の内容について
　　　　その他
４．idでCSSでスタイルを設定する際は入力してください。
５．classでCSSでスタイルを設定する際は入力してください。
　　※ 複数指定する場合、スペースで区切ってください。
　　例）class-test1 class-test2

それぞれ入力が終わりましたら、「タグを挿入」ボタンをクリックします。

フォームにタグが赤線のように追加されていることを確認します。

今回、メールの題名は固定で設定するため、題名の入力欄を消します。

お名前、メールアドレス、メッセージ本文欄に入力例を指す、「プレースホルダー」を設定します。

今回作成したフォーム内容を下記に入力していますので、ご自由にコピーしてください。

<label> お名前 (必須)
    [text* your-name placeholder"例）山田 太郎"] </label>

<label> メールアドレス (必須)
    [email* your-email placeholder"例）sample@e-mail.com"] </label>

[select* menu-870 "ご意見、ご提案について" "記事の内容について" "その他"]

<label> メッセージ本文
    [textarea your-message placeholder"例）メッセージ内容を入力してください。"] </label>

[submit "送信"]

メールタブを変更

続いて、「メール」タブをクリックして、問い合わせ先へ送る情報を設定します。
あらかじめ送信先のメールアドレスが入力されていますが、変更したい場合は適宜変更してください。
今回は、題名の「”[your-subject]”」を「お問い合わせ」に変更し、保存ボタンをクリックしています。

他にも必要に応じて、「メッセージ」タブや「その他の設定」タブの内容に変更してみてください。
これでフォームの作成は完了しました。

お問い合わせページを作成

作成したお問い合わせフォームを使って、固定ページを作成してみましょう。

メニューの固定ページをクリックします。

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

お好みの内容でタイトルと文章を入力してください。

別タブでお問い合わせフォームをクリックし、ショートコードをコピーしてください。
ショートコードの文字をクリックするとショートコード全体が選択されます。

固定ページに貼り付けてプレビュー画面を見てみましょう。

このように簡単にお問合せフォームを作成することができました。
あとはお好みでCSSなどでスタイルを変更してください。

固定ページをナビゲーションに追加

最後に、お問い合わせページにアクセスできるように、ナビゲーションにお問い合わせページを追加しましょう。

メニューの「外観」から「メニュー」をクリックします。

初めての場合は「メニュー構造」に「メニュー名」を入れてメニューを作成します。

「メニュー項目追加」の「固定ページ」から作成したページ（今回はお問い合わせ）にチェックを入れて、「メニューに追加」をクリックします。

このように固定ページが追加されたことを確認し、「フッターナビゲーション」にチェックをいれて「メニューを保存」ボタンをクリックします。
※ 必要に応じてヘッダーナビゲーションにもチェックを入れてください。

フッターにお問い合わせへのリンクが貼り付けられ、お問い合わせにアクセスすることができるようになりました。

このようにContact Form 7を使用すれば、簡単にお問合せフォームを作成することができますので、ぜひ試してみてください。

投稿 【Contact Form 7】お問い合わせフォーム作成方法【WordPress】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/108/feed/ 0 【WordPress】httpからhttpsへリダイレクトする方法【サンプル】 https://nyanblog2222.com/webproduction/wordpress/19/ https://nyanblog2222.com/webproduction/wordpress/19/#respond Mon, 27 Apr 2020 11:09:07 +0000 https://nyanblog2222.com/?p=19 目次 リダイレクトとは？リダイレクト設定 リダイレクトとは？ リダイレクトとは、 移転や閉鎖、URLが変更されたWebページに訪れたユーザに対し、自動的に新しいWebページへ転送することです。HTTPリダイレクト、URL […]

投稿 【WordPress】httpからhttpsへリダイレクトする方法【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

リダイレクトとは？

リダイレクトとは、 移転や閉鎖、URLが変更されたWebページに訪れたユーザに対し、自動的に新しいWebページへ転送することです。HTTPリダイレクト、URLリダイレクトとも言われています。

もし、別のURLで同じ内容のページが複数存在する場合、SEOとしては同じサイトとして扱われず、SEO評価が分散されてしまうため、不利となってしまいます。これは、httpとhttpsも同様のことが言えます。

リダイレクト設定

今回、常時SSL（https）化は設定されている想定で進めています。
まずは、wordpressフォルダ内の「.htaccess」ファイルを開きます。
※ 念のためバックアップしておくか、ローカルで編集することをおすすめします。

開くとこのような中身になっています。
#BEGIN WordPress とありますように、WordPress側で設定された内容になっています。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

このファイルを編集してリダイレクトの設定を行います。
注意点として、リダイレクトを設定する場所はファイルの一番先頭ということです。（#はコメントアウトの意味なので、実際には読まれません。）

# リダイレクトの設定　ここから
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
# リダイレクトの設定　ここまで

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

これでhttpからhttpsへのリダイレクトされるようになりました。
確認してみてください。
※ 複数WordPressインストールしている場合はそれぞれファイルを更新してください。

投稿 【WordPress】httpからhttpsへリダイレクトする方法【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/webproduction/wordpress/19/feed/ 0