カテゴリー: コーディング

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

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

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

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

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

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

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

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

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

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

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

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
使用したい画像ファイルとボーダーのサイズ、ボーダーのパターンを指定できます。
横の数字がボーダーのサイズとなります。

CSS変数とは、「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」となっています。

変数には文字列や数値などを入れることができます。
この変数に、繰り返し利用する数値やカラーコードなどをCSS変数を使えば、
定義しておいた変数の中身だけ変えるだけで、変更が可能となります。

CSS変数の定義
利用したい部分で var(–変数名) と記述すると、定義した値を当てはめられます。

:root {
  --text-position: center;  /*text-positionは変数名*/
}
.test {
  width: 200px;
  height: 100px;
  text-align: var(--text-position);
}

CSS変数は動的に利用でき、JavaScriptに流用することができます。
下記では.testの変数–text-positionの中身を取得する記述です。

const boxElement = document.querySelector('.test');
const cssStyle = getComputedStyle(boxElement);
const cssValue = String(cssStyle.getPropertyValue('--text-position')).trim(); 
 
console.log(cssValue);

wpに標準であるタクソノミー「カテゴリー」や「タグ」とは別に、自由にタクソノミーを追加することが可能です。
自由に追加した、タクソノミーが「カスタムタクソノミー」となります。

■タクソノミー
タクソノミーは簡単に言うと「カテゴリ」や「タグ」などといった分類を自分で追加することができる事です。

■ターム
言葉で説明するとタクソノミーに属した分類です。

例えば「商品」(タクソノミー)に「食品」を追加したとします。
この場合は
「商品」がタクソノミー
「食品」がタームのようになります。

■カスタム投稿タイプ
標準の「投稿」「固定ページ」とは別に、自由にで投稿タイプを追加することができます。
追加した投稿タイプを「カスタム投稿タイプ」と呼びます。

■flex-grow
flex-growプロパティはflexのアイテムの伸長数を設定でき、数値で指定します。

Flexのコンテナがアイテムを格納して、余りがある場合、指定されたプロパティに沿って、自動的に余白を埋めるよう伸縮します。

ただし、flexアイテムでないときは伸縮しません。

■flex-shrink
flex-shrinkプロパティはflexアイテムの縮短数を設定でき、数値で指定します。

先ほどの「flex-grow」とは違い、数値が大きいほど幅が狭くなります。

そして、「flex-shrink」は「flex-wrap:nowrap」と同時に使用しないといけません。

■flex-basis
flex-basisの使い方は、width、heightと同じです。

flexアイテムの幅をwidthで指定しても、別のプロパティで比率を指定している場合、widthの値が反映されません。
その場合に幅を固定してくれるのが、このflex-basisプロパティです。

「flex-direction」が、row、row-reverseのときは「flex-basis」は横幅を指定します。
「flex-direction」が、columnやcolumn-reverseのときは「flex-basis」は縦の長さを指定することになります。

値に指定できるのは数値と、初期値である『auto』です。

マルチサイトでテーマを変更する方法です。マルチサイト化してもヘッダーやフッターが共通化されている状態だと思いますが、新規追加したサイトのテンプレートを変更することが可能です。

1.参加サイトから、サイトネットワークの管理→サイト
2.サイトを編集の設定からTemplateの箇所をテーマのフォルダ名を指定することによって使用するテンプレートの変更が可能になります。

マルチサイトはサイトごとにテーマを変えたり、使用プラグインの組み合わせを変更することができるので、汎用性を持ちつつ、サイトを一元管理できるというメリットがあります。

マルチサイトに対応しないプラグインもあり、
一般的に単一でのサイトでのみ運営するケースが多いため、マイナーなプラグインやテーマファイルの場合、マルチサイト対応を行なっていないケースがあります。

WPのマルチサイト化は、1つのサーバー、1つのプログラムで複数のサイトを運営できる便利な機能です。

ネットワークの有効化をしてから、WordPressをマルチサイト化すると親サイトのURLに「/blog」が追加されてしまい、ページのリンク切れなどを引き起こします。この「/blog」は不要なので削除する方法を紹介します。

ネットワーク管理者の管理画面から親サイトのパーマリンク設定を変更することです。

ネットワーク管理者の管理画面から「サイト」を開き、設定タブをクリックします。そうすると、「Permalink Structure」という項目があるので「/blog」を削除すれば完了です。

WordPressを初めてマルチサイト化したとき、つまずくポイントだと思うので、対処法は知っておきたいですね。

CSSの疑似クラス :only-child は、兄弟要素がない要素を指定します。
:first-childや:last-child :nth-child(n)と似た指定方法ですが、:nth-childほどに詳細に指定することはできません。

例ではonly-childという文字だけが非表示になり、テキストの文字だけが表示されます。

  

    
only-child
  

  

    
テキスト
    
テキストonly-child
  

section :only-child {
  display:none;
}

システムで組まれていて、静的に買い替えることができない場合、jQueryでの要素の移動で対応できる場合があります。

下記では、.testの内容を.contentの要素の中に移動させています。

   $('.test').prependTo($('.content'));

        
test