クリエイター：コーディング備忘録ブログ – ページ 38 – クリエイター：コーディング備忘録ブログ

wp ページャーが利かない場合

2018/592018/59 admin コメントをする

ではなく、get_postsを使用して、カスタム投稿の記事一覧を拾得しましょう。

get_postsはテンプレートタグやカスタムループを生成する際に使用します。

query_postsはテンプレートタグやメインループに影響を与えるため、使用はあまりしないほうがよいでしょう、
SQLクエリの再実行や、メインクエリの書き換えで間違いが起こりやすくなります。

カスタム投稿タイプのカテゴリ別アーカイブページの作成

2018/582018/58 admin コメントをする

カスタム投稿タイプで設定したカテゴリ一覧ページを作成し、それぞれの親カテゴリーから子カテゴリーに階層を踏むようなページの作成をする場合

archive-カスタム投稿名.php


    
	



 '', 'taxonomy' => 'タクソノミー名')); ?>


	

 10,
	'paged' => $paged,
	'orderby' => 'post_date',
	'order' => 'DESC',
	'post_type' => 'カスタム投稿名',
	'post_status' => 'publish'
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
	while ( $the_query->have_posts() ) : $the_query->the_post();
?>

taxonomy-タクソノミー名.php







	


slug"; ?>">name; ?>

この二つのphpファイルを作成すれば大カテゴリーとカテゴリー別のアーカイブページが作成できます。

fontawesome

2018/572018/57 admin コメントをする

Font Awesomeとは、ウェブサイトなどでアイコンフォントを表示できるようにしてくれるサービスです。
webアイコンはwebフォントと同じように表示できるアイコンのことです。画像よって表示しているわけではないので、
スマホで見た時のように、拡大して表示したとしてもアイコンの表示は荒れることなくきれいに表示させることができます。

■FontAwesome5
FontAwesomeの最新バージョンで、無料と、有料のPROバージョンがあります。

FontAwesomeを使うためにCDNを読み込んでおく必要があります。

上記をheadに追記したら実際にサイトから使いたいアイコンを探していきますfontawesome

使いたいアイコンを選び、で囲まれた部分表示したい箇所に記述します。

Head Cleaner

2018/522018/52 admin コメントをする

Head Cleanerは、WEBページを構成する要素の中で、容量の大きい CSS や JavaScript を最適化してくれます。

W3 Total Cacheに要素の最適化機能はありますが、Lazy Load との相性もあり、画像の読み込みに不具合が生じてしまう原因になります。

それ以外に、Head Cleaner にはセキュリティ強化に関する設定や、不具合に対処するための設定が充実しています。

Head Cleaner はキャッシュという仕組みを利用するプラグインで、サイトのデザイン変更やプログラムの追加のような変化を加えた場合、キャッシュファイルなど削除する必要があります。

ワードプレス関連記事を表示する

2018/512018/51 admin コメントをする

サイトを閲覧しているとき、ブログの記事投稿などで関連した記事を見るなどを見たことがある人が多いと思います。
関連記事には、投稿記事に関連する記事の候補をユーザーに表示することで、誘導する役割があります。記事の閲覧数を増やし、ユーザーをサイト上に滞在する時間を長くすることが可能です。

今回はプラグインを使用して、ワードプレスで簡単に関連記事を表示する方法を紹介します。

■WordPress Related Posts
WordPress Related Postsは、ブログの記事の下に関連記事を表示することができるプラグインです。
手軽に関連記事を表示する機能が導入できます。

パソコン表示用とスマートフォン表示用のテーマが複数用意されており、サイトのデザインに合わせて好きなデザインを選ぶこと可能です。
また、表示させる内容も細かくカスタマイズすることができるので、自分の好みに調整するとよいでしょう。

表示位置を記述する場合、以下の記述をテーマのphp内に記述します。

WordPress 一括置換出来るプラグイン「Search Regex」

2018/4272018/427 admin コメントをする

WordPress 全記事から検索して一括置換出来るプラグイン「Search Regex」です。
大量の投稿がある場合で、例えば電話番号など変更したいという場面など、一記事ずつ修正していたのでは、いくら時間があっても足りません
そんな時に「Search Regex」が活躍できるはずです。

■一括置換できるプラグイン「Search Regex」
Search Regex

■使い方
Search Regexのツールメニューの「Search pattern」に置き換えたい文字列を、「Replace pattern」に置き換え後の文字列を入力して、
Replace & Saveを押すだけで、一括置換を行ってくれます。

■Searchボタン

置き換える文字列の含まれるものを検索します。

■Replaceボタン

置換後の名用の確認

「Replace & Save」ボタン

一括置換したデータを保存します。

トップページのSEO設定方法

2018/4262018/426 admin コメントをする

SEO設定はプラグイン「All in One SEO Pack」を利用するのが一般的です

WordPressのダッシュボードからAll in One SEO Packを開きます。

トップタイトルを書き換えはホームページ設定の
■タイトル
タイトルで設定したキャッチフレーズ-サイトタイトルが検索結果やSNSなどに表示されます。

■メタキーワード
ここでは、サイトの内容に合致するするキーワードを半角「,」（カンマ）区切りで入力します。

■メタディスクリプション
サイトの内容を要約した説明文を入力します。

全ての記事においてSEO設定が必要となるかどうかは、サイト内容や記事内容によります。検索エンジンにキーワードを入力して情報を求めている方々に届きやすくなるので必要な部分は設定しておいたほうがよいでしょう。

WP サイト公開を一時的に中止

2018/4252018/425 admin コメントをする

「サイト全体や一部を一時的に非公開にしたい」など、サイト制作をしているうえでよくある場面だと思います。
また、確認用に、ログインしている状態では管理者がサイトを閲覧できるように、外部の人間にだけ見えないようにしたい場合、
プラグインのWP Maintenance Modeを使用すると簡単に実現が可能となります。

■WP Maintenance Mode
プラグイン → 新規追加 → WP Maintenance Mode の検索からインストール、有効化で、追加します。

WP Maintenance Modeの設定からプラグイン有効化を選択するとサイト全体を非公開にすることが可能です。

■wp maintenance mode の使い方
管理者リンクではログイン画面へのリンクを表示するかですが、一般ユーザーにもログイン画面が表示できてしまうのでoffにしておいたほうがよいでしょう。

CSSスタイルでは非公開の表示用のデザインの変更を行うことができます。

noindex,nofollow・・・メンテナンス中のメタrobotの動作です。

除外項では特定のページを非公開の状態を解除できます。

メディアクエリ

2018/4242018/424 admin コメントをする

レスポンシブデザインが登場し、解像度のシェアなどからwebサイトの横幅の重要度が下がりました。
PC向けの横幅は最大サイズが1,920pxとなります。
基準としては、960pxなどが1つの基準になるかと思います。

メディアクエリのサイズの基準となるのは、

1.タブレット 768px
2.スマホ横 480px・568px
3.スマホ縦 320pxなど

タブレットなどではPC表示になるのか
タブレットはPC表示に含むかスマホに含むかは、コンテンツによって異なります。
ですが、タブレットはスマホに比べ、ウェブサイトを閲覧しやすいため、PCレイアウトが適していると思われます。タブレットならpc表示でも閲覧しても大丈夫な時はありますが、スマホ表示の場合、ボタンや画像などの余白が冗長的に見えることが多いです。
コンテンツのデザインによりますが、PC向けのレイアウトのほうがよいでしょう

border-image

2018/4232018/423 admin コメントをする

border-imageのプロパティはIE11が対応して、大体のブラウザで使用可能です。


  


.wborder_box {
  width: 300px;
  border-style: solid;
  border-width: 20px 25px 20px 25px;
  -moz-border-image: url(img/border.png) 20 25 20 25 stretch;
  -webkit-border-image: url(img/border.png) 20 25 20 25 stretch;
  -o-border-image: url(img/border.png) 20 25 20 25 stretch;
  border-image: url(img/border.png) 20 25 20 25 fill stretch;
  box-sizing: border-box;
}

20 25 20 25 stretch
使用したい画像ファイルとボーダーのサイズ、ボーダーのパターンを指定できます。
横の数字がボーダーのサイズとなります。