クリエイター：コーディング備忘録ブログ – クリエイター：コーディング備忘録ブログ。クレアネットスタッフがまとめています。

WordPress ログイン画面をカスタマイズ

2019/422 sugita コメントする

WordPressではログイン画面のレイアウト変更など設定を自由に変更可能です。

基本的にfunction.phpにログイン画面でCSSの指定が効くように記述するだけです。

function login_page() { ?>

  <style>

    .login {
      /*ログイン画面の設定*/
    }
  .login #login h1 a {
       /*ログイン画面のロゴの設定
     }
  </style>

<?php }

add_action( 'login_enqueue_scripts', 'login_page' );

function login_page() { ?>

<style>

.login {

/*ログイン画面の設定*/

}

.login #login h1 a {

/*ログイン画面のロゴの設定

}

</style>

<?php }

add_action( 'login_enqueue_scripts', 'login_page' );

Styleにロゴに対する設定をするだけでも、ログイン画面に見栄えをオリジナルに設定が可能ですし、
背景の変更も可能なので、サイトにオリジナリティを出したい時に設定しておきたいですね

画像をテキスト化してくれるサービス

2019/416 sugita コメントする

画像に記載されている文字をテキストとして抽出してくれるサービスの紹介です。

Online OCR

会員登録なしで利用でき、46ヶ国語に対応しています。

書き出し形式は以下の３つです。

・Microsoft Excel
・Microsoft Word
・プレーンテキスト

画像の解像度に左右されたり、文字が間違って抽出される部分はありますが、
長文など時間がかかりそうな手打ち作業よりも、ちょっとした修正だけで、書き出せるので、
画像の文字起こしなど時間のかかりそうな作業の場合すごく役立ちそうですね

gnaviにカスタム投稿記事リストを表示

2019/410 sugita コメントする

gnaviなどにカスタムカテゴリーで作成した記事をリストで表示させる方法です。

使用場面の例では、
「product」というカスタム投稿で、商品情報などが登録された記事を投稿する場合や
スタッフ紹介など人物の登録をしてリストでスタッフ一覧を表示させたい場合などです。

‘numberposts’の-1(-1で全件表示)の数字を変更すれば、好きな数を新しい順から引っ張ってくることが可能です。
post_type’ => ‘product’,には任意で作詞したカスタム投稿名、単に投稿ならpostで指定可能です。

<ul id="gnav">
<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>page01">page01</a></li>
<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>page02">page02</a></li>
  <div class="subnav">
    <ul>
      <?php
		$object = get_post_type_object(get_post_type());
		$posts_array_2 = get_posts( array(
		'numberposts' => -1,
		'post_type' => 'product',));
		foreach($posts_array_2 as $my_post):
		?>
      <li><a href="<?php echo $my_post->guid; ?>"><?php echo $my_post->post_title; ?></a></li>
      <?php endforeach; wp_reset_postdata(); //クエリのリセット ?>
    </ul>
  </div>
</li>
</ul>

<ul>

<?php

$object = get_post_type_object(get_post_type());

$posts_array_2 = get_posts( array(

'numberposts' => -1,

'post_type' => 'product',));

foreach($posts_array_2 as $my_post):

<li><a href="<?php echo $my_post->guid; ?>"><?php echo $my_post->post_title; ?></a></li>

<?php endforeach; wp_reset_postdata(); //クエリのリセット ?>

</ul>

</div>

</li>

</ul>

Urlのアンカー#idを取得する

2019/48 sugita コメントする

外部リンク先のアンカー(#id)でスクロールや特定の処理をさせたい場合、
Url末尾にある#idの値を取得することで、可能になります。

$function(){
  //URLのハッシュ値
  var url = location.hash;
  //ハッシュ値があればページ内スクロール
  if(urlHash) {
   //URLハッシュ値があった時の処理
  }
});

$function(){

//URLのハッシュ値

var url = location.hash;

//ハッシュ値があればページ内スクロール

if(urlHash) {

//URLハッシュ値があった時の処理

}

});

簡単にシェアボタンを設置する方法

2019/43 sugita コメントする

twitterやfacebookのオリジナルのシェアボタンを簡単に作成する方法です。

画像をそのままシェアボタンに設定したい場合、aタグで設定することで簡単に設定が可能です。

<a href="http://twitter.com/share?url=[URL]">Twitter</a>

<a href="https://www.facebook.com/sharer/sharer.php?u=[URL]">Facebook</a>

<a href="http://line.me/R/msg/text/?[URL]">LINE</a>

<a href="http://twitter.com/share?url=[URL]">Twitter</a>

<a href="https://www.facebook.com/sharer/sharer.php?u=[URL]">Facebook</a>

.htaccessでBASIC認証を解除する

2019/328 sugita コメントする

.htaccessで指定したのファイルやディレクトリのみベーシック認証を解除する方法です。

開発時や未公開時などに便利なBASIC認証ですが、一部だけ公開したい場合があります。
そのような場合は解除したいディレクトリ階層に下記を記述した.htaccessを設置するだけです。

Satisfy any
order allow,deny
allow from all

Satisfy any

order allow,deny

allow from all

上ではディレクトリごと解除になりますが、

ファイルを指定して書く場合はこのようになります。

<Files "〇〇.html">
Satisfy any
order allow,deny
allow from all
</Files>

Satisfy any

order allow,deny

allow from all

</Files>

SiteGurad WP Pluginで不正ログイン対策

2019/326 sugita コメントする

「SiteGurad WP Plugin」は、不正ログインに対する攻撃に対してのWordPressのセキュリティ向上ができるプラグインです。
WordPressにインストールするだけで、ログインページのセキュリティを向上させることができます。

SiteGurad WP Plugin

プラグインの設定では画像認証でセキュリティ向上させる画像認証を加える事が出来ます。

ログイン時にユーザー名、パスワードと画像で示された文字を入力しないとログインできないようになります、

画像認証で表示される文字は毎回変更されるので、コンピュータによる不正ログインの確立を下げてくれます。

また、SiteGurad WP Pluginにはログインロック機能があり、有効化すると、ログインの失敗が指定時間に一定回数に達したIPアドレスを指定時間ブロックしてくるなど、
ログインセキュリティの観点で不正ログインを防いでくれます。

Untitled

2019/326 sugita コメントする

セレクト要素に擬似要素で三角形などの装飾をすると、その三角形の部分だけクリックできない問題が起こります。
その場合、疑似要素対しに「pointer-events: none;」を指定することで解決ができます。
マウスイベントのターゲットから除外することで、セレクト要素の選択が可能になります。

select label {
    position: relative;
}

select label:after {
    display: block;
    content: " ";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 30px;
    height: 30px;
    margin-top: -8px;
    background: url(○◯◯.png)  no-repeat;
    background-size: 20px;
    pointer-events: none;/*　←★これ*/
}

select label {

position: relative;

}

select label:after {

display: block;

content: " ";

position: absolute;

top: 50%;

right: 30px;

width: 30px;

height: 30px;

margin-top: -8px;

background: url(○◯◯.png) no-repeat;

background-size: 20px;

pointer-events: none;/*　←★これ*/

}

youtube埋め込みjQueryプラグイン「Boxer」の使い方

2019/319 sugita コメントする

ボタンを押すとYouTube動画をモーダルで表示させるプラグインの紹介です。

Boxerダウンロードページ

ダウンロードファイルで使用するファイルは
jquery.fs.boxer.min.js、jquery.fs.boxer.cssの二つです。

<link href="css/jquery.maximage.css" rel="stylesheet">
<script src="js/jquery.fs.boxer.min.js"></script>

1 2	<link href="css/jquery.maximage.css" rel="stylesheet"> <script src="js/jquery.fs.boxer.min.js"></script>

使い方は簡単でリンク先をYouTubeのの動画に設定しクラス名を設定するだけです。

<a href="https://www.youtube.com/embed/動画ID" class="boxer" data-gallery="videos" >再生</a>

1	<a href="https://www.youtube.com/embed/動画ID" class="boxer" data-gallery="videos" >再生</a>

$(function(){
  $('.boxer').boxer();
});

$(function(){

$('.boxer').boxer();

});

jQueryでスクロール時に下から表示させる方法

2019/3182019/318 sugita コメントする

スクロール時にしたからコンテンツがふわっとフェードインさせる方法です、

■css

.fade{
  opacity : 0;
  transform: translateY(30px);
  transition: all 0.6s;
}

.fade{

opacity : 0;

transform: translateY(30px);

transition: all 0.6s;

}

■js

$(function(){
    $(window).scroll(function (){
        $('.fade').each(function(){
            var target = $(this).offset().top;
            var scrollTop = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > target - windowHeight + 300){
                $(this).css('opacity','1');
                $(this).css('transform','translateY(0)');
            }
        });
    });
});

$(function(){

$(window).scroll(function (){

$('.fade').each(function(){

var target = $(this).offset().top;

var scrollTop = $(window).scrollTop();

var windowHeight = $(window).height();

if (scroll > target - windowHeight + 300){

$(this).css('opacity','1');

$(this).css('transform','translateY(0)');

}

});

表示させるタイミングは、ターゲットの存在するスクロール位置から300のところ(if (scroll > target – windowHeight + 300)です。