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 わぷ道.

プラグイン「WPS Hide Login」

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

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

The post WordPressログイン画面 URLの変更方法 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 わぷ道.

使っているサーバーなどによって、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 わぷ道.

やろうとした事

プラグインを使えば簡単に出来る事ですが、APIのキーを取得したりと少し面倒に思ったので、youtubeのfeedを利用する事で簡単に指定したチャンネルの新着動画を取得、表示しようと思ったことから作成しました。

実際のコード

PHP

function youtubeList($atts){
  extract(
    shortcode_atts(
      array(
        'channel' => '',
        'limit' => '3'
      )
      , $atts
      )
  );
  $feed='https://www.youtube.com/feeds/videos.xml?channel_id='.$channel;
  $xml = simplexml_load_file($feed);
  $obj = get_object_vars($xml);
  $obj_entry = $obj["entry"];
  if($obj_entry != null){
    $total = count($obj_entry);
    if( $total != 0 ){
      $contents .= '<ul class="movie_list_wrap">';
      for ($i=0; $i < $limit; $i++) {
        foreach ($obj_entry[$i] as $key => $value) {
          if( in_array($key, array('id','title','updated')) ){
            if( $key=='id'){
                $video_id = str_replace('yt:video:', '', $value[0]);
              };
            if( $key=='title' ){
              $video_title = $value[0];
            };
            if( $key=='updated' ){
              $video_date = date('Y.m.d',strtotime($value[0]));
            }
          }else{
            continue;
          }
        }
      $contents .= '<li class="movie_list"><div class="youtube"><div class="youtube-container">';
      $contents .= '<iframe src="https://www.youtube.com/embed/'. htmlspecialchars($video_id, ENT_QUOTES, 'UTF-8').'" frameborder="0" allowfullscreen></iframe>';
      $contents .= '</div></div></li>';
      }
    $contents .= '</ul>';
    }
  }
  $html = $contents;
  return $html;
}
add_shortcode('youtube_list','youtubeList');

CSS

.movie_list_wrap{
  display:flex;
  gap:10px;
  padding:0;
}
.movie_list_wrap li{
  list-style:none;
}

CSSは最低限の記載なので、それぞれ調整してご利用ください。

ショートコードの使い方

記事の中で下記のようにショートコードを挿入する事でそこにyoutubeのiframe動画が表示されます。

表示件数は「limit」で指定していてチャンネルIDは「channel」に指定します。
実際の表示がこちらです。

※サンプルで使用させていただいた動画は個人的に応援しているチャンネルであり、当方とは一切関係ありません。

The post 指定したyoutubeチャンネルの新着動画を表示させる方法 first appeared on わぷ道.

ウィジェットとは、WordPressのテーマごとに用意されたサイト内のブロックを簡単に表示、非表示、並び替えたり出来る仕組みです。
基本的なWordPressサイトのレイアウトは「ヘッダー」、「ボディ」、「サイドバー」、「フッター」というパーツ構成で成り立っています。
それらのパーツの中にウィジェットエリアと言うブロックが用意され、その中に共通で表示させたいブロックや広告などを入れる事で簡単に管理できる仕組みになっています。

すぐに使える便利ウィジェットプラグイン

DD Last Viewed

このプラグインはウィジェットに追加するだけで、最近見た記事の一覧表示が出来ます。
最新何件表示するか、投稿ページの他に固定ページ等も表示するか、表示から除外したいページのIDを指定するかの簡単な指定だけをウィジェット上で行って使うのでとても簡単に利用できます。

WordPress Popular Posts

Popular Posts(人気の投稿)、と名前の通りです。
サイト内でよく見られてる記事を人気順に、指定の個数、指定のカテゴリ、指定した期間等詳細な設定をした上で一覧をウィジェット表示させられます。
簡単な割に細かい設定まで出来るので、カテゴリーページ毎に違う指定をさせたりも面白いかもですね。

Advanced Random Posts Widget

このプラグインを使うとウィジェットエリアにランダムの記事を表示させられます。
人気の記事も見てもらいたいけど、あまり目に留まらないような記事にも目を向けてもらうと言った意味ではランダム表示も使い方次第では良いですね。

Ajax Search Lite

通常のWordPressの検索機能では、検索ボタンを押した後にアーカイブページに表示される形ですが、このプラグインを使えば別ページに遷移させずにその場で入力したテキストに沿った検索結果を表示させることが出来ます。

The post ウィジェット活用プラグイン4選 first appeared on わぷ道.

HTML、CSS部分の作成

まずは、モーダルウィンドウを開くためのボタン、モーダルウィンドウ本体、オーバーレイ部分のパーツをそれぞれ作成していきます。

<body>
    <div class="modal_open_btn">開く</div>
    <div class="modal_window">
        <p>モーダルウィンドウの中身です</p>
        <span class="modal_close">×</span>
    </div>
    <div class="modal_overlay"></div>
</body>

js部分の作成

ここからはjs部分の作成になります。
こちらはjQueryを利用しているのであらかじめjQueryを読み込んでることを確認してください。

js部分1

モーダルウィンドウの表示と、bodyに対してoverflow:hiddenをかける事でモーダルウィンドウを開いている際に、スクロール出来ないように指定します。

$('.modal_open_btn').click(function () {
      $('body').addClass('scroll_lock'); 
        $('.modal_overlay').fadeIn();
        $('.modal_window').fadeIn();        
});

js部分2

閉じるボタン、オーバーレイ部分をクリックした際に、モーダルウィンドウの非表示と、先ほど指定したスクロールの固定を解除します。

$('.modal_close , .modal_overlay').click(function () {
      $('body').removeClass('scroll_lock'); 
      $('.modal_overlay').fadeOut();
      $('.modal_window').fadeOut();
});

js部分3

ESCキーを押した時に、閉じるボタンを押した時と同様の動作をするように指定しています。

window.onkeyup = function(event){
    if(event.keyCode == '27'){
        $('body').removeClass('scroll_lock'); 
        $('.modal_overlay').fadeOut();
        $('.modal_window').fadeOut();
    }
}

わぷまる

「keyCode == '27'」の部分で、ESCキーを指定しているので、ここの数字を変更する事で他のキーを指定することも出来るよ

全部まとめたのがこちら

$(function () {
    $('.modal_open_btn').click(function () {
        $('body').addClass('scroll_lock'); 
        $('.modal_overlay').fadeIn();
        $('.modal_window').fadeIn(); 
        
    });
    $('.modal_close , .modal_overlay').click(function () {
        $('body').removeClass('scroll_lock'); 
        $('.modal_overlay').fadeOut();
        $('.modal_window').fadeOut();
    });
    window.onkeyup = function(event){
        if(event.keyCode == '27'){
            $('body').removeClass('scroll_lock'); 
            $('.modal_overlay').fadeOut();
            $('.modal_window').fadeOut();
        }
    }
});

The post 【ESCキーで閉じる】モーダルウィンドウの実装方法 first appeared on わぷ道.