CSSであれば、メディアクエリを使って画面幅に応じたスタイルを当てるようにすると思います。
しかし、出したい要件がPCとスマホで全然違っていたり、どうしても配置を変えたいけどCSSだけじゃ対応しきれない場合など、PC、スマホでソースを書き換える時にJSで表示の条件分岐をする方法を紹介します。

どういった方法を使うのか

JSでPC、スマホで表示を変えようと思った時に使う方法は主に２つあります。
１つは画面幅を取得して、その画面幅を元にPCかスマホかの判定をするパターン
２つ目は、UserAgent(ユーザーエージェント)の値を取得して何のデバイスで見ているかを判定するパターンです。

画面幅で判定をする場合

画面幅で判定をする場合は、下記のような処理を行います。
デバイスではなく画面幅に依存するため、スマホでも縦向きで見る時、横向きで見る時の処理を変えたり柔軟な対応が行えます。

var windowWidth = $(window).width();
var windowSm = 640;
if (windowWidth <= windowSm) {
    //横幅640px以下（スマホの場合の処理）
} else {
    //横幅641px以上（PCの場合の処理）
}

UserAgent(ユーザーエージェント)で判定をする場合

UserAgent(ユーザーエージェント)を判定をする場合は下記のような処理を行います。
デバイスや使用ブラウザに応じて処理を変更するため、先ほどのようにスマホの縦向き、横向きで処理を変えると言った事は出来ませんが、細かいデバイスの指定が出来るため、iPhoneの場合、Androidの場合、iPadの場合で処理を変えたり、PCでも、MacBookの場合、Windowsの場合、chromeの場合、safariの場合などの細かい指定が出来ます。
下記の参考ソースでは、PC、スマホで処理を変えるために「iPhone,iPod,Android」の場合と、それ以外の場合で処理を変更しています。

if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    // スマホの場合の処理
} else {
    // PCの場合の処理
}

まとめ

用途やサイト全体の作りに応じてどちらを使うか、両方を使うかなど考えながら使ってみてください。
どちらの方法もそれぞれメリット・デメリットがありますが、実際にはもっと細かく指定する事で、タブレットの場合はどうするか、小さなモニターではどうするか等、詳細な設定が行えます。

The post PCとスマホでJSの処理を変更する方法 first appeared on わぷ道.

round関数を用いて「round(値,桁指定)」のように指定します。
桁を指定していない場合は小数点以下の四捨五入となります。

桁指定をした場合

プラスの引数での指定

「1,2,3」等プラスの引数を指定すると小数点第何位までを表示するかの指定が出来ます。
「1」を指定した場合は小数点以下1桁を残す形で、3.1415 が3.1になり
「2」を指定した場合は小数点以下2桁を残す形となり、3.14となります。

マイナスの引数での指定

上記と反対に「-1,-2,-3」とマイナスの引数で指定した場合は整数の何桁以上で四捨五入するかの指定となります。
「-1」を指定した場合は1の桁が四捨五入され1555が1560となり
「-2」を指定した場合は10の桁が四捨五入され1555が1600となります。

実際のコードと出力内容

$a = 3.1415;

echo round($a);
// >>> 3
echo round($a , 1);
// >>> 3.1
echo round($a , 2);
// >>> 3.14

$b = 1555;

echo round($b , -1);
// >>> 1560
echo round($b , -2);
// >>> 1600

切り上げをする

ceil関数を使う事で小数点以下を切り上げた数値を取得出来ます。
round関数と違い桁を指定する事は出来ないので小数点にのみ有効です。

切り下げをする

floor関数を使う事で小数点以下の切り下げた数値を取得出来ます。 ceil関数同様に、桁の指定は出来ません。

$b = 1555;
echo ceil(($b / 100) * 100);
// >>> 1600
echo floor(($b / 100) * 100);
// >>> 1500

The post 数値の四捨五入、切り捨て、切り上げをする方法 first appeared on わぷ道.

ifの条件式で、特定の要素が存在する場合、しない場合で処理を変える必要があったため、こちらの対応をしました。

実際のコード

if(document.getElementById("id") != null){
    //要素がある場合
}else{
    //要素が無い場合
}

The post Javascriptで要素が存在するかチェックする方法 first appeared on わぷ道.

プラグイン「WPS Hide Login」

このプラグインをインストールし、有効化すると「設定　＞　一般」の中に「WPS Hide Login」の項目が追加されます。

入力項目は２つ、「ログインURL」と「リダイレクトURL」があります。
こちらはそれぞれ、ログイン用画面のURLを自動で指定出来る物(デフォルトだと「login」)と間違ったURLを入れた時にリダイレクトされるページ（デフォルトだと「404」)を指定出来ます。

The post WordPressログイン画面 URLの変更方法 first appeared on わぷ道.

wrapについて

wrapを使うと指定したHTML要素で、対象の要素を１つずつ囲むことができます。

<p>ダミーテキスト１</p>
<p>ダミーテキスト２</p>
<p>ダミーテキスト３</p>

上記のようなHTMLに対して下記のように指定すると

$('p').wrap('<div></div>');

このような形に１つずつ囲む事が出来ます。

<div><p>ダミーテキスト１</p></div>
<div><p>ダミーテキスト２</p></div>
<div><p>ダミーテキスト３</p></div>

wrapInnerについて

wrapInnerを使うと対象の要素の中身を丸ごと囲む事が出来ます。

<p>ダミーテキスト１</p>
<p>ダミーテキスト２</p>
<p>ダミーテキスト３</p>

wrapInnerの場合は対象の中身をまとめて囲うためこのようになります。

$('p').wrapInner('<span></span>');

<p><span>ダミーテキスト１</span></p>
<p><span>ダミーテキスト２</span></p>
<p><span>ダミーテキスト３</span></p>

wrapAllについて

wrapAllを使うと対象に当てはまる要素を全て１つにまとめて囲むことができます。

<div class="textbox">
    <p>ダミーテキスト１</p>
    <p>ダミーテキスト２</p>
    <p>ダミーテキスト３</p>
</div>

上記のようなHTML構造の際に、wrapAllを使うとこのようになります。

$('.textbox p').wrapAll('<div class="inner"></div>');

<div class="textbox">
    <div class="inner">
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
    </div>
</div>

wrapAllの注意点

<div class="textbox">
    <p>ダミーテキスト１</p>
    <p>ダミーテキスト２</p>
    <p>ダミーテキスト３</p>
</div>
<div class="textbox">
    <p>ダミーテキスト４</p>
</div>

上記のように、複数の同じ要素がある際にそのまま同じ処理を行うと、１つ目の要素の方に引っ張られ下記のような形になってしまいます。

<div class="textbox">
    <div class="inner">
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
        <p>ダミーテキスト４</p>
    </div>
</div>

<div class="textbox">
</div>

今回やりたかった事

<ul class="list">
    <li>
        <div>除外したい</div>
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
        <div>除外したい</div>
    </li>
    <li>
        <div>除外したい</div>
        <p>ダミーテキスト４</p>
        <p>ダミーテキスト５</p>
        <p>ダミーテキスト６</p>
        <div>除外したい</div>
    </li>
</ul>

上記のような時に、liの中のpタグのみをその場で別のタグで囲みたかったのですが、ここまでで説明した「wrap」、「wrapInner」、「wrapAll」をそのまま使うだけでは上手く対応出来なかったので下記のように対応した結果、目的の形に整形する事が出来ました。

var count = $('.list li').length;
for(let i = 0; i < count; i++){
    $('.list li').eq(i).children('*:not( div )').wrapAll('<div class="inner"></div>');
}

<ul class="list">
    <li>
        <div>除外したい</div>
        <div class="inner">
            <p>ダミーテキスト１</p>
            <p>ダミーテキスト２</p>
            <p>ダミーテキスト３</p>
        </div>
        <div>除外したい</div>
    </li>
    <li>
        <div>除外したい</div>
        <div class="inner">
            <p>ダミーテキスト４</p>
            <p>ダミーテキスト５</p>
            <p>ダミーテキスト６</p>
        </div>
        <div>除外したい</div>
    </li>
</ul>

The post wrapを使って指定した要素をタグで囲む方法 first appeared on わぷ道.

固定ページや、別の記事ページに、特定の記事の内容を取得、表示したい時に使ってください。

指定ID記事の投稿タイトルを取得

<?php echo get_post( 1 )->post_title; ?>

指定ID記事のパーマリンク取得

<?php echo get_permalink( 1 ); ?>

指定ID記事のカスタムフィールド名「test」を取得

<?php echo get_post_meta(1,'test', true); ?>

指定ID記事の本文を取得

<?php echo get_post(1)->post_content; ?>

指定ID記事のサムネイルを取得

画像パスを取得したい場合

<?php echo get_the_post_thumbnail_url( 1, 'medium' );?>

画像を出力したい場合

<?php get_the_post_thumbnail( 1, 'medium' );?>

指定ID記事の投稿者情報を取得

まずは「$author」の変数に投稿者データをまとめて取得します。

<?php $author = get_userdata(get_post(1)->post_author); ?>

The post 投稿IDから記事の内容を取得する方法 first appeared on わぷ道.

before,after等の疑似要素なんかでよく使う「content」のCSS、よく使うのは、liタグやaタグの前後とかにアイコンを追加したりなどで使いますね。
以前にHTML側の更新が難しいと言われ、CSSのみで本文をいじった際に、「content」内にちょっとしたテキストを追加したのですが、これって改行どうやるんだっけ。となって調べた事があったのでまとめておきます。

コード

  white-space: pre-wrap;
  content: 'ここで\A改行がしたい';

必要なのは上記の２つです。
「white-space:pre-wrap;」を指定する事で、「content」内で改行が出来るようになり、実際の「content」のテキストの中で「\A」を記入する事で改行が出来ます。

The post content内のテキストを改行させる方法 first appeared on わぷ道.

使っているサーバーなどによって、WordPressをインストールした際に強制的にURLの中に｢/wp/｣や｢/wordpress/｣(以下「/wp/」で統一します)といったスラッグが入る事があります。
WordPressで作ったサイトである事は間違いないし、見ればわかる人にはわかるけど、わざわざURL上に出したくはないですよね。
今回はそんなURLの修正方法を紹介していきます。

WordPress管理画面からサイトアドレス(URL)の変更

「設定」→「一般」の中に移動して、サイトアドレスの欄がありますので、そこを下記のように書き換えます

FTPを使ってファイルをローカルにコピー

FTP等を使って実際のサイト内のファイル「.htaccess」と「index.php」をローカルに保存します。

index.phpの書き換え

ローカル上にコピーした「index.php」を下記画像のように書き換えます。

コピー、変更したファイルのアップロード

コピーした「.htaccess」と前項の書き換えが完了した「index.php」ファイルを「/wp/」と同じ階層（最初に入っていたところから1個上の階層）にアップロードします。

パーマリンク設定の更新

URL構造を変更したことによって、パーマリンクの設定が初期化されます。
WordPress側の設定画面に戻り、「設定」→「パーマリンク設定」に移動し、パーマリンクを変更しない場合はそのまま更新ボタンを押す事でパーマリンクが再設定されます。

以上ですべての設定が完了です。
サイト側の表示を確認して問題がある場合はどこかの設定が間違っている可能性があるので再度確認して対応してください。
リンク先などを絶対パスで記載していたりなど、古いURLを指定している箇所がある場合はその辺りも注意して確認する事をおすすめします。

The post WordPressサイトのURLから｢/wp/｣､｢/wordpress/｣などのスラッグを削除する方法 first appeared on わぷ道.

以前に完全にカスタムフィールドのみで情報をまとめてテンプレート表示させるサイトを作成した際に「運用者側で余計なミスをしないように使わない入力欄は非表示にしてほしい」という要望がありました。
こちらはその時に行った対応の一部です。

使い方

functions.phpに下記のように記載します。
今回は実際に行った「タイトル」、「本文」、「サムネイル」の入力欄を消すように指定しています。

function remove_post_editor() {
     remove_post_type_support('post','title'); //タイトル
     remove_post_type_support('post','editor'); //本文
     remove_post_type_support(‘post’,'thumbnail'); //サムネイル
}
add_action( 'init' , 'remove_post_editor' );

わぷまる

「'post'」の部分は投稿タイプの指定なので、固定ページだったりカスタム投稿ページで利用する場合はここを書き換えると対応できます。

他にはこんな指定も

今回、非表示にしなかったパーツでも下記のように色々なパーツが同じように指定できます。

'title' （タイトル）
'editor' （内容の編集）
'author' （作成者）
'thumbnail' （アイキャッチ画像）（現在のテーマが 投稿サムネイル をサポートしていること）
'excerpt' （抜粋）
'trackbacks' （トラックバック送信）
'custom-fields' （カスタムフィールド）
'comments' （コメントの他、編集画面にコメント数のバルーンを表示する）
'revisions' （リビジョンを保存する）
'page-attributes' （メニューの順序）（投稿タイプの hierarchical が true であること）
'post-formats' （投稿のフォーマットを削除。投稿フォーマットを参照）

関数リファレンス/remove post type support

The post 投稿画面から「タイトル」、「本文」等の入力欄を消す方法 first appeared on わぷ道.

今回は「WP ULike」というプラグインでブログに「いいね」機能を追加する方法を紹介します。
このプラグインを使うと、SNS等の「いいねボタン」とは別にWordPressに独自の「いいね」機能が追加できます。

基本設定

細かい設定もたくさんありますが、今回はよく使う設定をピックアップして説明します。

デザインの指定

設定画面のcontent typesでボタンのデザインを４パターンから選択出来ます。

自動表示の指定と、自動表示をした場合に、どこに表示させるかの設定があります。
ボタンの表示位置、ボタンを出すページ出さないページの指定などが出来ます。

わぷまる

自動表示をしない場合も[wp_ulike]のショートコードを使うと「いいねボタン」を表示出来るので、好きな場所に出したり、テンプレートのテーマ内に埋め込んで調整する事も出来ます。

いいねされた数の表示

左から、表示する、非表示にする、ログインしているユーザーだけに表示する設定です。

いいねが０回の場合にカウンターを表示するかどうかの設定です。

あわせて読みたい

【いいねボタン】WP Ulikeでいいねされた数を一覧に表示する方法

2022年8月25日phpプラグイン

The post 【いいねボタン】プラグインで簡単！いいねボタンを設置する方法 first appeared on わぷ道.