投稿者: doggstar

まず結果から、

なぜか、ウインドウサイズを大きくすると、発動が遅れたりと、

data-start=”240″ data-duration=”9″

（発動まで待つ時間　アニメーションの速度）

がうまく機能しないが、まあ大体でという感じならok

https://coco-factory.jp/ugokuweb/move02/9-4-2/

こちらを参照

9-4-2

これができるサンプル

これを変更してなんとかできた。

 

完成

css

//*========= 手書き風にするためのCSS ===============*/


.wrapper_tegaki{
    margin-left: 5%;
    margin-top: -5%;
    z-index: 1;
    position: relative;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    //height: 100vh;
    


/*SVGのサイズ*/
svg{
    max-width:240px;/*SVGタグの横幅*/
    width:100%;/* レスポンシブ対応にするため100%を指定*/
    height:auto;
}
}

//* マスクをするパスの設定*/
#mask .cls-1{
    fill:none;
    stroke:#FFFFFF;
    stroke-width:24;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */
}

html

<div class="wrapper_tegaki">

<svg id="mask"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="203.4" height="74" viewBox="0 0 203.4 74" style="enable-background:new 0 0 203.4 74;" xml:space="preserve">	
    
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="<?php echo get_stylesheet_directory_uri(); ?>/img/s1984_moto.svg" width="203.4" height="74" mask="url(#clipmask)"></image>
    
<mask id="clipmask" maskUnits="objectBoundingBox">

    <path data-start="240" data-duration="9" class="cls-1" d="m32.14,35.54c-3.77-7.92-6.61-8.43-12.93-4.66S2.28,41.74,2.58,46.83c.47,7.78,5.82,4.86,14.04,7.17s22.89,5.86,11.66,9.46-23.17,11.81-24.47,8.52c0,0-4.72-4.36-2.91-6.08s5.63-2.27,7.54-2.45,18.25-11.71,18.25-11.71l11.44-17.53,2.36-2.38,1.51,4.53-4.48,21.31-1.64,6.87,4.61-11.29,1.51-3.47,3.49-8.09,2.18,7.91-2.72,12.3-.31,3.01s4.97-13.43,7.15-12.73,8.06-6.3,8.06-6.3c0,0-.88,7.85-.4,8.76s3.78,10.92,3.78,10.92l-.58-17.9,6.55-9.46,6.31-9.59,4.49,10.84s-2.7,2.54-4.49,1.87-7.57,10.94-7.57,10.94l2.08,3.67,4.62,2.26,7.53-6.47,4.57-7.56,8.68.73,3.76-4.9-3.76-4.06s-4.45,1-5.7,2.36-2.36,15.32-2.36,15.32c0,0,2.33,1.97,2.54,1.74s9.99-3.87,9.99-3.87l3.64-5,15.91-23.82,8.72-7.71-5.3,19.82-4.33,13.17-.07,5.65,20.53-18.81,3.43-11.37s-4.7,4-5.46,4.36-1.07,1.84-2.52.68-2.9-5.04-1.44-6.81,6.77-6.89,6.77-6.89c0,0,6.98-.52,7.35-1.54s3.15,3.47,3.15,3.47l-9.39,34.25,14.4-26,6.82-1.56-2.01-9.77,5.61-6.18,7.98-.55.24,7.34-7.06,10.52-9.89,10.42,1.03,9.58,10.89-5.41,6-10.13-.61-6.96,9.33-11.76v10.69l17.62-2.83,5.32-14.18-9.8-3.46-3.29,36.74"/>


</mask>  
</svg>

<!--/wrapper--></div>

js

new Vivus('mask', {//svgに指定したid名
    type: 'scenario',// アニメーションのタイプを設定
    // duration: 20,//アニメーションの時間。数字が小さくなれば速くなり、大きくなれば遅くなる
    // forceRender: false ,//パスが更新された場合に再レンダリングさせない
    animTimingFunction:Vivus.EASE_OUT,//動きの加速減速設定
});

htmlの

data-start=”240″ data-duration=”9″　が待　と速度だが安定しない

ｊｓの

type: ‘scenario’,// アニメーションのタイプを設定

が

data-start使えるやつ

vivus オプション

これの解説サイト

https://evoworx.dev/lab/svg-animation-vivus/

 

イラレでのポイント

パスを１本で書く

現物は　ｓｖｇ

マスクはペーストでいれる

参考サイト通りhttps://coco-factory.jp/ugokuweb/move02/9-4-2/

赤文字のサイズはいられで作成したときのサイズを入れ込み

筆記体アニメutm.ai

 

https://webwork-plus.com/content/design/swiper-multiple.html

https://takechi-web.com/swiper-multiple/

 

私事の検証結果

結論

参考サイトのやり方で、スライドは別々の設定が可能だが、

ページネーションについては、

swiper-button-prev　を使い回せない（.sl01  .swiper-button-prev）みたいに指定しても一緒に動く

そのためswiper-button-prevを使いまわしたい（デザインがきいているから）場合

swiper-button-prev　page-prev1 とクラスをつけて、

設定でも　page-prev1　の方をナビに設定する

増やす場合

swiper-button-prev　page-prev2

設定でも　page-prev2　とナビに設定する

 

最初ミスってたのは

const youtube_swiper = new Swiper(“.youtube_swiper”, {

と２個名前を替えること。最初のconst swiper のままやってた

完成コード

<script>
const youtube_swiper = new Swiper(".youtube_swiper", {
//こっちがモバイル　兼　PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
  //slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
  //centeredSlides: true, // アクティブなスライドを中央に配置する
  //spaceBetween: 32, // スライド間の余白（px）
  // loop: true,
  speed:1000,//矢印クリック 自動再生で　動く速度　多いほうが遅く
  //initialSlide: -1,//　0スタートで表示順調整

  // autoplay: {
  //   delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
  //   disableOnInteraction: false,
  //   resistanceRatio:0.1,
  // },
  
  breakpoints: { // こっちがPC
      737: { // 画面幅px以上で適用　ブレークポイント
     slidesPerView: 'auto', //autoにするとcssで指定したサイズで表示
      //slidesPerView: 3,
        //spaceBetween: 0, // スライド間の余白（px）
      
    }
  },
  
// ページネーション
// pagination: {
//     el: ".swiper-pagination",
//     clickable: true,
//   },
  // 前後の矢印
  navigation: {
    nextEl: ".page-next1",//このクラスがあればそこがナビになる
    prevEl: ".page-prev1",//このクラスがあればそこがナビになる
    
  },
});
</script>

<script>
  
const slider_f_swiper = new Swiper(".slider_f_swiper", {
//こっちがモバイル　兼　PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
  //slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
  //centeredSlides: true, // アクティブなスライドを中央に配置する
  //spaceBetween: 32, // スライド間の余白（px）
  // loop: true,
  speed:1000,//矢印クリック 自動再生で　動く速度　多いほうが遅く
  //initialSlide: -1,//　0スタートで表示順調整

  autoplay: {
    delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
    disableOnInteraction: false,
    resistanceRatio:0.1,
  },
  
  breakpoints: { // こっちがPC
      737: { // 画面幅px以上で適用　ブレークポイント
     slidesPerView: 'auto', //autoにするとcssで指定したサイズで表示
      //slidesPerView: 3,
        //spaceBetween: 0, // スライド間の余白（px）
      
    }
  },
  
// ページネーション
// pagination: {
//     el: ".swiper-pagination",
//     clickable: true,
//   },
  // 前後の矢印
  navigation: {
    nextEl: ".page-next2",//このクラスがあればそこがナビになる
    prevEl: ".page-prev2",//このクラスがあればそこがナビになる
    
  },
});
</script>

 

 

JavaScript不要！CSSだけで出来るドロップダウンメニューの実装方法

https://www.evoworx.co.jp/blog/dropdownmenu/

CSSで作る！吹き出しデザインのサンプル19選

【html】ulやliの中にdivやpやaをいれてもいいか解説

popup maker をつかってなんとか出来そう

特定のページだけにモーダルウィンドウを表示するWordPressプラグイン「Popup Maker」

seo関係上、0秒表示はクローラーをブロックする可能性もゼロでないんで　検証注意

やり方は、
ページ指定
内容はエディターで自分で書く
cssは普通にサイトのcssに

閉じるボタンをcssで消す

.pum-close.popmake-close{display: none;}

エディタにボタンを作成

<p><button class="pum-close popmake-close" type="button" aria-label="Close">はい </button>　いいえ</p>

この　はい　にて ウインドを閉じるボタンを再現　多分aria-label=”Close”が重要（閉じるボタンから引用）でなく、class=”pum-close popmake-close”が重要だった

ターゲットで投稿タイプやカテゴリー　アーカイブも選べたので

固定ページ　製品　諸々をかける

 

無料で使える！かっこいい＆かわいいカタカナフォント

無料で使える！ポップでかわいい日本語フリーフォント

【商用可】かわいい！日本語の手書きフリーフォント

 

手書き風　svg　マスク

https://coco-factory.jp/ugokuweb/move01/4-1-6/

Vivus.js

https://www.evoworx.co.jp/blog/animating-svg-with-vivus-js/

Vivus Instant」の使い方

 

実際fullのロゴをやってみた

<div class="svg_logo_white animate__animated animate__fadeIn" style="animation-delay:1.3s">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/top_svg/svg_logo_white.svg" width=""  class=" " alt="キーワード|<?php echo $alt1; ?> ">

</div>

<div class="svg_logo_anime"><?php //動くsvg インラインsvg
                include(get_stylesheet_directory() . "/img/top_svg/include_svg_full_logo.php"); ?></div>

<div class="svg_logo_color  animate__animated animate__fadeIn" style="animation-delay:1.3s">

<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/top_svg/svg_logo_color.svg" width=""  class=" " alt="キーワード|<?php echo $alt1; ?> ">

</div>

３つ用意して、ふわっと最後完成させる

///////svg rogo

/////inview  アニメーション
.inview{display: none;}
.inview.on{display: block;
}

.svg_logo_wrap{
    position: relative;
    margin-inline: auto;
    width: 100%;
    height: 56px;
    .transition;


   //padding-top: 200px;

   @media screen and (max-width: 736px){
    //padding-top: 100px;
    height: 33px;
}//@media screen 736px

 
   @top_svg_logo_size:500px;
   @top_svg_logo_size_mob:260px;

   .svg_logo_color img,
   .svg_logo_white img,
   .svg_logo_anime svg{
       width:@top_svg_logo_size;

       @media screen and (max-width: 736px){
        margin-left: -20px;

       }//@media screen 736px

       .transition;
       
   }

    .svg_logo_color{
        position: absolute;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        //margin-top: -2.5px; margin-left: -2.5px;

        img{
            //width: @top_svg_logo_size;
            @media screen and (max-width: 736px){
                width: @top_svg_logo_size_mob;
            }//@media screen 736px
        }

    }

    .svg_logo_anime{position: absolute;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    line-height: 0;

        svg{
            //width: @top_svg_logo_size;

            @media screen and (max-width: 736px){
                width: @top_svg_logo_size_mob;
            }//@media screen 736px
            
        }
        
    }

    .svg_logo_white{
        position: absolute;

       
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        img{
            //width: @top_svg_logo_size;

            @media screen and (max-width: 736px){
                width: @top_svg_logo_size_mob;
            }//@media screen 736px
        }

    }


}

                         //なんでも使えるように　.inview が画面に入ったら onがつく  .inview.on
$('.inview').delay(300).queue(function(){
  //$('.inview').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
       
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
        if (scroll > elemPos - windowHeight + 30){
     $(this).addClass('on');
    }
        // スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 100 || navigator.userAgent.indexOf('Android') > 0) {
        // タブレット向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('on');
    }
} else {
        // PC向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('on');
    }
}


   } );

window.addEventListener('load', function(){
  scroll_effect();

内に追加

Vivus Instantで作成したアニメーションSVGは、

それを囲ったdiv ,svgにstyle=”animation-delay:1.3s”を書いても反映されないため、それ自体の発動を遅らせるには、

inview を使って、onさせて、onを遅らせることで実行できた。

そのまま表示させると、アニメーションの発動が早くて、見せ場がみにくかった

margin-inline: auto;

https://zenn.dev/tonkotsuboy_com/articles/margin-inline_auto

 

width: fit-content

見出しに使えるfit-contentを解説してみる

transition: 1.5s cubic-bezier(0.15, 1.13, 0.25, 1);

 cubic-bezier

説明

https://qiita.com/96usa_koi/items/6f313f1d664806a77313

目安便利

https://easings.net/#

ジェネレーター

https://cubic-bezier.com/#.13,.68,.86,.32

 

border-radius: 100vh;
border-radius: 9999px;

https://jajaaan.co.jp/web-production/frontend/border-radius/

デザイン参考 web

https://jajaaan.co.jp/service/web/ 斜めデザイン

https://casitaflor.com/recruit/　1.ブラシ　動く　2.ホバー白黒　3.英語が右から左

 

https://dynamo-inc.jp/　TOPのみかっこいい　動画、スクロール背景

 

昭和

https://showa-ds.co.jp/　1.svg 文字　色がつく　書いてるよう　 2.スクロールで現れる人　２重で現れるアニメーションで　動画のよう

 

タイトル　と同じカラーでビヨン

https://shimizu-jidousya.com/

こんなコラムで結構　順位入ってる　　小牧　春日井　守山　板金

https://shimizu-jidousya.com/column/

 

手書き風　svg　マスク

https://coco-factory.jp/ugokuweb/move01/4-1-6/

Vivus.js

https://www.evoworx.co.jp/blog/animating-svg-with-vivus-js/

 

Vivus Instant」の使い方

 

 

 

<div class="flex2box effect-fade  inview left_mask_in">

inview left_mask_in

をつける

inviewは画面に入ったら　.onがつく すると表示される 透明度でopti

left_mask_inはアニメーション用のクラスで、今回の場合はボックス用のhiddenであり親

親にアフターでボックスを背景と同じ色につけて

左から右に動かすアニメーション

http://www.d-marking.com/%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%83%AB%E3%83%BC%E3%83%97%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84/

//スクロールで見えたら.onがつく
.inview {
    //transition-delay: .4s;
        transition: all 1.5s;
        position: relative;
        opacity: 0;
    }
    .inview.on {
        opacity: 1;
    }


//左から背景ベタがイン
.left_mask_in{ 
    overflow: hidden;
    position: relative;
//設定ベタ
&.inview::after{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    //background-color: #000;
    background-color:#e7f4ff;
    transform: translateX(0%);
    transition: transform ease 1s;
}
//見えたら
&.inview.on::after{
    transform: translateX(100%);
}

}

//なんでも使えるように　.inview が画面に入ったら onがつく  .inview.on
   $('.inview').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
       
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
        if (scroll > elemPos - windowHeight + 30){
     $(this).addClass('effect-scroll');
    }
        // スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 100 || navigator.userAgent.indexOf('Android') > 0) {
        // タブレット向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('effect-scroll');
    }
} else {
        // PC向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('on');
    }
}


   } );

//

フッターの

    window.onload = function() {
  scroll_effect();

  $(window).scroll(function(){
   scroll_effect();
  });

  function scroll_effect(){

ここに追記

  }
};
    </script>

 

 

 

Crop-Thumbnails Post

https://support.freee.co.jp/hc/ja/articles/204891596-%E5%80%A4%E5%BC%95%E3%81%8D%E3%82%92%E8%A8%98%E5%B8%B3%E3%81%99%E3%82%8B

 

割引の勘定科目を使うと、売上は売上のまま記載されるので、

課税金額が増えてしまう。実際の売上も分かりづらい

そのため、売上にマイナスを選べるようにする

「課税売上」の支出が登録できないため、まずはそれが使用できるように設定します。

［設定］→［税区分の設定］より、使用したい税区分の編集ボタンをクリックします。（例：課税売上）

必要になる検索項目にチェックを入れて［保存］ボタンをクリックします。

 

これで割引は、

売上にして　マイナスを記載するのみ

 

//
//
//
////設定を配列で入れて、welcartで利用する際、global宣言しやすくする
////また、この方が、wordpressの設定とかぶることがない
//function my_admin_site_vars() {
//
////// 関数内なので　記事IDを読み込む
//global $site_seo,$site,$site_con,$site_con2;
//    
//    
//
////グローバルとして宣言
//  global $my_admin_site;
//
//    
//    //配列で入れ込む
//  $my_admin_site = array(
//
//
//      
////    //インフォカテゴリ （絞り込み 除外用）
////    'info_cat' => 734,
////    'info_cat_out' => -734,
////
////    //ブログカテゴリ
////    'd_blog_cat' => 243, //注意 blog_cat が cat_blog_archiveで定義してる
////    'blog_cat_out' => -243,
//      
//     
//      
//
////自作定義
////    'top' => '', // a_blog_boxに仕込む　トップだけ新着ブログを表示 定義
////    'kansei_kiji_no' => '', //完成見学会用 a_info1
////    'page_all' => '', //すべて読むページで仕様 prev nextを 出さない
////
////    'yarpp_blog' => '',
//
//

//管理画面のタイトルの文字を置き換え　外部リンクを挿入
//クォーテーションの入れ子にポイント
add_action( 'admin_head', 'change_text' );
function change_text() {
    $echo1 = "<span>メニュー</span>　<a href='/wp-content/themes/D/d/fontcss/fontello/demo.html' target='_blank'>アイコン確認</a>";
      echo '
      <script type="text/javascript">
      jQuery(document).ready(function($){
    $("#cfs_input_2842 h2").html("'.$echo1.'");
        });

      </script>
      ';
}

 

Welcartで会員ページやカートページを判定して条件分岐するソースコードと、それを使った自作関数

会員ページ or カートページの判定

<!-- 会員ページの判定 -->
<?php if($usces->item->post_name == 'usces-member') : ?>
    <p>会員ページだった場合</p>
<?php endif; ?>

<!-- カートページの判定 -->
<?php if($usces->item->post_name == 'usces-cart') : ?>
    <p>カートページだった場合</p>
<?php endif; ?>

<!-- 会員ページ、カートページの条件分岐 -->
<?php if($usces->item->post_name == 'usces-member') : ?>
    <p>会員ページだった場合</p>
<?php elseif($usces->item->post_name == 'usces-cart') : ?>
    <p>カートページだった場合</p>
<?php else : ?>
    <p>会員ページ、カートページ以外のページ</p>
<?php endif; ?>

 

会員ページの細かい判定

<?php if($usces->page == 'login') : //会員ページの場合 ?>
    <p>ログインページです</p>
<?php elseif($usces->page == 'newmemberform') : ?>
    <p>新規入会ページです</p>
<?php elseif($usces->page == 'newcompletion') : ?>
    <p>新規ご入会完了ページです</p>
<?php elseif($usces->page == 'lostmemberpassword') : ?>
    <p>パスワード発行ページです</p>
<?php elseif($usces->page == 'lostcompletion') : ?>
    <p>パスワード発行メール送信完了ページです</p>
<?php elseif($usces->page == 'changepassword') : ?>
    <p>パスワード変更ページです</p>
<?php elseif($usces->page == 'changepasscompletion') : ?>
    <p>パスワード変更完了ページです</p>
<?php elseif($usces->page == 'member') : ?>
    <p>会員情報ページです</p>
<?php elseif($usces->page == 'editmemberform') : ?>
    <p>会員情報更新完了後ページです（会員ページと同じページに遷移します）</p>
<?php elseif($usces->page == 'ordercompletion') : ?>
    <p>注文完了ページです</p>
<?php else : ?>
    <p>会員ページ以外のページです</p>
<?php endif; ?>

カートページの細かい判定

<?php if($usces->page == 'cart') : //カートページの場合 ?>
    <p>カートページです</p>
<?php elseif($usces->page == 'customer') : ?>
    <p>お客様情報ページです</p>
<?php elseif($usces->page == 'delivery') : ?>
    <p>配送方法ページです</p>
<?php elseif($usces->page == 'confirm') : ?>
    <p>確認ページです</p>
<?php elseif($usces->page == 'ordercompletion') : ?>
    <p>注文完了ページです</p>
<?php else : ?>
    <p>カートページ以外のページです</p>
<?php endif; ?>

 

会員ページ、カートページの判定をする関数

//会員ページかどうかの判定
function is_member_page($page_name = 'usces-member') {
    global $usces;
    if($usces->item->post_name == $page_name) return true;
    return false;
}

//カートページかどうかの判定
function is_cart_page($page_name = 'usces-cart') {
    global $usces;
    if($usces->item->post_name == $page_name) return true;
    return false;
}

<?php if(is_member_page()) : ?>
<p>会員ページの場合</p>
<?php elseif(is_cart_page()) : ?>
<p>カートページの場合</p>
<?php endif; ?>

会員、カートページの細かい判定用の関数

//会員ページ、カートページを細かく判定する関数
function is_welcart_page($page_name = 'cart') {
    global $usces;
    if($usces->page == $page_name) return true;
    return false;
}

デフォルトではカートページの判定をしています。他のページで判定したい場合は以下の文字を渡して下さい。

cart　（カートページの場合）
customer　（お客様ページの場合）
delivery 　（配送方法ページの場合）
confirm　（確認ページの場合）
ordercompletion　（注文完了ページの場合）
login　（ログインページの場合）
newmemberform　（新規会員登録ページの場合）
newcompletion　（新規会員登録完了ページの場合）
lostmemberpassword　（パスワード発行ページの場合）
lostcompletion　（パスワード発行メール送信完了ページの場合）
changepassword　（パスワード変更ページの場合）
changepasscompletion　（パスワード変更完了ページの場合）
member　（会員情報ページの場合）
editmemberform　（会員情報更新完了後ページの場合）
例えば配送方法ページかどうかを調べたい場合は以下のようにします。

 

<?php if(is_welcart_page('delivery')) : ?>
<p>配送方法ページの場合</p>
<?php endif; ?>

 

春日井の広告会社

春日井の看板屋

春日井のデザイン会社

春日井のロゴ作成

春日井　SNS運用代行

春日井　プロカメラマン　撮影

 

春日井 動画撮影

 

春日井 Tシャツ作成

 

春日井　名刺作成

春日井　名刺作成

 

//投稿時にACFのカスタムフィールドの画像を自動でアイキャッチに登録する
function acf_set_featured_image( $value, $post_id, $field ) {
    if($value != '') {
        add_post_meta($post_id, '_thumbnail_id', $value);
    }
    return $value;
}
add_filter('acf/update_value/name=event_img1', 'acf_set_featured_image', 6, 3);//アフター
//add_filter('acf/update_value/name=sekou_before', 'acf_set_featured_image', 10, 3);//ビフォー
//add_filter('acf/update_value/name=sekou_img2', 'acf_set_featured_image', 10, 3);//その他
//add_filter('acf/update_value/key=sekou_gallery2', 'acf_set_featured_image', 10, 3);//ギャラリー

https://tsukuriba.co.jp/721

 

name=にカスタムフィールドの名前

リニューアル側のhtaccsessに

リダイレクトを準備

テストサーバーにて、wp動作確認後、（お問い合わせフォームテスト）

本番サイトにてセッティング　SSL 動作確認URL（これはcssがあたらないので崩れる）

メールの設定

xにてdkim@でメール作成

さくらと　ｘでdkim設定

webサーバーとメールサーバーを分ける　DKIM設定

SPFも設定

v=spf1 +a:www427b.sakura.ne.jp +mx include:spf.sender.xserver.jp ~all

 

さくらでテストメールアドレスを作成し、送受信テスト

（ネームサーバー変更後のテスト用）

Xにて

dnsを変更する

 

MXレコードを mail.ドメインに

mail.ドメインのaレコードをさくらのIPに

 

ネームサーバーをxserverに変更

 

その後１時間程度待って確認

1時間じゃ反映されない

また、dnsをxserverに変更して、

その後、すぐにxserverを使っているメールアドレスからメールを送ると、

りーたんメールが届く、

ヤフーなどは普通に届く。

 

これは多分xserver内部でメールを送っているからだろう

この際、りーたんメールには、Aレコードが反応しないと

<test@top-flag.com>: host top-flag.com[183.181.86.17] said: 554 5.7.1
<test@top-flag.com>: Recipient address rejected: Access denied (in reply to
RCPT TO command)

とくるが、実際は　MXレコードをさくらに飛ばしているはずなのに、

それが全く効いていない状態だ。

xserverで設定したMXのDNSが効いていなく、

メールが届かない。汗

xserver同士の問題だが、これはこれでそれなりに問題。

xドメインでDNSを設定すればよいのかもしれないが、

全部手入力しなければいけない。

 

※大きく間違えた箇所

18:00頃　ネームサーバーを変更

21:40分　まだ旧ページが表示されてるが、dnsをネットで確認すると切り替わってる

モバイルで4Gでアクセスすると、無効なURLです

その後、古いページにまた。

何かおかしいと思ったら、SSLを作成していなかった。

ドメイン追加時に多分警告されたはずだが今回スルーしたか、わすれていた。

たしか、いつもなら現在のドメインのDNSに何かを入れることで、NSがサーバーにあたってなくても、SSLをあらかじめ設定できたはず。

これをわすれてたので、慌てて、というか？えって感じでSSLを設定した。

あと１時間かな？

メールは届くようになった

 

 

 

<tr>
<th class="mob_none">　</th>
<td style="font-size: 0.8rem;">Google reCAPTCHA で保護されています
    <a href="https://policies.google.com/privacy">プライバシー</a>・<a href="https://policies.google.com/terms">利用規約</a></td>
</tr>

コンタクトフォーム下段

css

.grecaptcha-badge { visibility: hidden; }

 

■公開前

サイト設定・ディスプリクション　キーワード　タイトル

メディア削除

https://trickster.tools/title-description/

ファビコン

https://rakko.tools/tools/69/

favicon DF 上手くいかなかった

sns用サムネイル　他設定

/1_img/1_site/thum_fb.jpg

 

メール送信テスト

 

管理画面調整

http://www.d-marking.com/%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%80%80%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC/

 

■公開後

メールアドレス変更　フォーム

ノーインデックス解除

春日井ナビ　自サイト

ブログからリンク

公開後順位チェック

アナリティクス　webマスター

マイビジネスリンク

snsリンクチェック

 

/**
* spammail
*/
function wpcf7_validate_spam_message( $result, $tag ) {
    $value = str_replace(array(PHP_EOL,' '), ”, esc_attr($_POST['event_basho_jyusho']));
    if (!empty($value)) {
    if (preg_match('/^[!-~]+$/', $value)) {
    $result['valid'] = false;
    $result['reason'] = array('event_basho_jyusho' => '日本語で入力してください');
    }
    }
    return $result;
    }
    add_filter( 'wpcf7_validate', 'wpcf7_validate_spam_message', 10, 2 );

event_basho_jyushoのフィールド　今回は住所

 

https://www.dm2.co.jp/blog/4852

add_filter('get_terms_orderby', 'order_terms_by_slug', 10, 3);
function order_terms_by_slug($orderby, $args, $taxonomies) {
    if($taxonomies[0] == 'artist'){
    $orderby = 't.name';
}
   
    return $orderby;
}

ひんとはここから

Using WordPress ‘get_terms_orderby’ PHP filter

add_filter('get_terms_orderby', 'your_custom_function', 10, 3);
function your_custom_function($orderby, $args, $taxonomies) {
    // your custom code here
    return $orderby;
}

$orderby (string): The ORDERBY clause of the terms query.
$args (array): An array of term query arguments.
$taxonomies (string[]): An array of taxonomy names.

ということで

$taxonomies[0] == としたらうまくいった

$orderby = ‘t.term_id DESC’;

$orderby = ‘t.slug ASC’;

カスタムメタキーで用語を並べ替える

$orderby = “meta_value ASC、t.name ASC”;

ここにも正解かいてあるわ

カスタムメタキーと分類法に基づいて用語を並べ替えます

add_filter('get_terms_orderby', 'order_terms_by_custom_meta_key_and_taxonomy', 10, 3);
function order_terms_by_custom_meta_key_and_taxonomy($orderby, $args, $taxonomies) {
    if (in_array('your_taxonomy', $taxonomies)) {
        $orderby = "meta_value ASC, t.name ASC";
    }
    return $orderby;
}