月份: 2017 年 8 月

PHP in_array comparing two arrays

PHP in_array() 無法比較兩個陣列，這邊採取替代的作法，使用array_intersect()，取得值的交集

/*
    VECTOR COOL
    https://vector.cool	
*/
$arr1 = array(1,2,3);
$arr2 = array(1,2,3,4,5,6,7);
$arr = array_intersect($arr1, $arr2);
if (count($arr) > 0) {
   // do something
}

參考資料：

[……]

閱讀更多

YouYube 影片線上下載器 – 可自動轉MP3 – 很快、很簡單、很好用

功能&特色：

  • 免費
  • YouYube 影片線上下載
  • YouYube 播放清單下載
  • YouYube 轉MP3
  • YouYube MP4影片
  • YouYube MP4影片(HD)
  • 可以一次下載多個影片

這大概是我用過最快最好用的影片下載器吧，非常推薦，簡單、直覺，直接就可以在網頁上把影片的音樂轉成MP3，如果你有習慣將喜歡的音樂或影片建立成撥放清單的話，也可以直接輸入播放清單的網址，它可以直接抓回整個播放清單所有的影片，可以直接在網路上點選批次下載，就不用一個網址一個網址打到手痠。

另外，的是這個下載器有提供兩種下載方式，一個是在他官網上輸入網址，另一個是直接在YouTube官網，你整個可以忘了這網站的連結，非常簡單

 方法一、從官網下載：

看到這畫面應該不用多說什麼，一看就知道怎麼用了吧

 方法二、從官網下載：

網址連結：

[……]

閱讀更多

[懶人CSS陰影]還在用PS上陰影嗎？用CSS為你的圖片或色塊加一點變化！

在設計網頁時為了不要讓圖片或色塊死板板的，有的人會傻傻的先用Photoshop上陰影再以圖片的格式上傳，今天我們直接為圖片和色塊加上CSS吧。

CSS實在有許多好用之處，今天要來跟大家介紹小編做網站時常常使用的CSS box-shadow！

顏色從淺到深的陰影色塊

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

特殊陰影處理

HTML

<div class="box effect1">
<h3>Effect 1</h3>
</div>

<div class="box effect2">
<h3>Effect 2</h3>
</div>

<div class="box effect3">
<h3>Effect 3</h3>
</div>

<div class="box effect4">
<h3>Effect 4</h3>
</div>

<div class="box effect5">
<h3>Effect 5</h3>
</div>

<div class="box effect6">
<h3>Effect 6</h3>
</div>

<div class="box effect7">
<h3>Effect 7</h3>
</div>

<div class="box effect8">
<h3>Effect 8</h3>
</div>

CSS

.box h3 {
    text-align: center;
    position: relative;
    top: 80px;
}

.box {
    width: 70%;
    height: 200px;
    background: #FFF;
    margin: 40px auto;
}


/*==================================================
 * Effect 1
 * ===============================================*/

.effect1 {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}


/*==================================================
 * Effect 2
 * ===============================================*/

.effect2 {
    position: relative;
}

.effect2:before,
.effect2:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.effect2:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}


/*==================================================
 * Effect 3
 * ===============================================*/

.effect3 {
    position: relative;
}

.effect3:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}


/*==================================================
 * Effect 4
 * ===============================================*/

.effect4 {
    position: relative;
}

.effect4:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    right: 10px;
    left: auto;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: r[......]
閱讀更多

Plesk 設定排程任務，定時瀏覽指定網頁

Plesk是一套很方便的主機系統管理程式，也是主流主機管理程式之一，很多主機商也都用Plesk來進行主機系統管理，本篇要介紹如何設定排程任務

什麼是排程任務?

有時我們在寫程式的時候會希望主機自動在某一個時間區間執行某些任務，例如：每日午夜12:00，進行購物車訂單出貨拋轉作業，當然也可以人工每天12點去瀏覽這支程式，只是非常愚蠢，偷懶是工程師的美德，於是我們需要一個像計時器的東西，時間到去做某些動作，達成自動化目的。

建立任務處理程式

我習慣會寫一支程式，專門執行某些特定任務，比如說：購物車訂單出貨拋轉作業，這支程式可透過瀏覽網頁的方式去驗證是否正常運行，確定一切都正常，接著我們需要一個觸發程式的瀏覽者，這我們就透過Plesk的排程任務達成。

設定Plesk

登入Plesk ，到指定網域的管理頁面，右上角有一個叫計畫的任務
PS. 如果您的Plesk管理面板中沒出現這個選單，那就是這功能管理者沒開放，就需聯絡你的主機商，如果他們不願意開這功能就換家主機商吧。
登入Plesk ，到指定網域的管理頁面，右上角有一個叫計畫的任務

添加一個任務

設定執行時間

  1. 我選擇獲取URL選項，讓Plesk排程任務，在指定時間瀏覽我的某一支檔案。
  2. 輸入要執行的檔案URL
  3. 設定時間及週期
  4. 發送通知，可以選擇僅發送異常通知就好
  5. 選擇通知對象
  6. 儲存

驗證

  1. 設定完成後，一定要檢查是否有在指定時間及周期中執行，可以寫個小程式，去紀錄執行時間，以驗證程式有正常運行。
  2. 承上點，若你確定你的程式運行完全正常沒有問題，但排程卻沒正常運行，請檢查排程設定，若也都沒錯，請聯絡主機商。

安全設定

  1. 眼尖的朋友應該會看到我的執行URL加了個c參數，後面跟了一堆亂碼，這是一個簡單的安全設定，為了避免爬蟲或有心人士，在非排程定義執行區間去執行此程式，所做的驗證機制，在我的php檔最前方加入下方程式碼，若沒有正確的key，此頁將返回hTTP 404錯誤，當作根本就沒這頁的存在
    <?php
if($_GET['c']!='B598FCD1B61E79D8249C5A8AAEC2D585'){
header("HTTP/1.0 404 Not Found");
exit;
}
  2. 設定 .htaccess 檔，該URL只允許執行某一 IP執行
    RewriteEngine On
RewriteCond %{REMOTE_ADDR} !=123.123.123.123
RewriteCond %{REQUEST_URI} ^/basic/test.php [NC]
RewriteRule ^ - [R=404,L]

    參考資料：

[……]

閱讀更多

PHP 清除字串頭尾空白

這是一個很常用的功能，有時我們在處理表單發送後的資料，有時常常會多按了一些空白，這些空白可能會導致資料錯誤，或是資料轉檔時，明明看資料沒錯，怎麼就對不起來，比如說我剛剛的例子，搞了我好久

用法：

<?php
　$str=" 測試字串，前後空白都會被清除     ";
　echo trim("$str");
?>

案例：

API回傳Json資料，怎麼看pickUpDateTime，都是沒值的，我就用empty()來做判斷，卻怎麼都友值，弄了半天是空白字元，我也不懂這API主人為什麼空值不拋要拋一堆空白自原來害人

[toStoreDateTime] => 2017/08/11 00:00:00
[pickUpDateTime] =>                    
[omTranMode] => 3203
[Status] => 50
[omReceName] => 王小明

不管!!至少問題找到了，問題就解決一半了，接著就是在用empty()作空值判斷前，先用trim()去過濾這些該死的空白

<?php
$pickUpDateTime ="                   ";
echo (empty(trim($pickUpDateTime )))?1:0;
?>

[……]

閱讀更多

javascript get query values from url 取網址參數

本篇使用 Javascript ， 若想用jQuery的方法，可參考本站另一篇

jQuery get query values from url 取網址參數 

本篇提供兩種方法，擇一使用

方法一：

/*
    VECTOR COOL
    https://vector.cool
*/
function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

方法二：

/*
    VECTOR COOL
    https://vector.cool
*/
function getURLParameter(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

 

用法：

/*
    VECTOR COOL
    https://vector.cool
*/
var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');

[……]

閱讀更多

jQuery get query values from url 取網址參數

本篇使用 jQuery方法， 若覺得jQuery的方法很大包，可參考本站另一篇

javascript get query values from url 取網址參數

QueryString.js

把第一段的程式碼放到一個名叫 QueryString.js 的檔案，以後需要時再去引入這支檔案就可。

/*
    VECTOR COOL
    https://vector.cool
*/
(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

用法：

/*
    VECTOR COOL
    https://vector.cool
*/
//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

參考資料：

[……]

閱讀更多

WordPress SEO 換網址後一定要做的3件事

轉至：V123 DEV – WordPress 中文開發團隊

可能因為某些原因，會需要更換WP網址，但之前寫的文章SEO好不容易做起來，大部分的頁面搜尋引擎也都收錄了，這樣不是太浪費了，SEO的部分等於一切重來，雖然換網址真的對SEO很傷，但沒辦法的時候我們只能將傷害降到最低。

第一步、設定固定網址

下圖，新網站的”固定網址“設置，
WordPress SEO 換網址後一定要做的3件事 - V123 DEV設定WordPress固定網址，請務必確定與舊網站設置相同 – V123 DEV

第二步、設定轉址

做完第一步，再來就是要將舊網域的網址轉至新網域的網址，但參數不變，讓每一篇文章都可以搬家到新網址

http://old-domain.com/example/
轉到
http://new-domain.com/example/

設定舊站根目錄下的 .htaccess 檔，把所有原有的值都刪了，添加下面兩行

所有網址就順利的重定向到新網址

第三步、設定Google Search Console 變更網址

如果您已經確定完成上述兩步驟，再來

當然是要通知Google大神，拜拜碼頭，說我要換網址了
登入Google帳戶，進入Google Search Console，先新增新網站網址，並通過驗證，至於怎麼新增網址到 Google Search Console 請Google一下，很簡單，這邊不多贅述。
新增完成後在右上角下拉選單選擇舊網站網址，按一下右側的齒輪icon設定，選擇變更網址選項 - V123 DEV新增完成後在右上角下拉選單選擇舊網站網址，按一下右側的齒輪icon設定，選擇變更網址選項 – V123 DEV

將會一步一步地確認，最後提交申請 - V123 DEV將會一步一步地確認，最後提交申請 – V123 DEV參考資料：

https://v123.tw/wordpress-seo-%E6%8F%9B%E7%B6%B2%E5%9D%80%E5%BE%8C%E4%B8%80%E5%AE%9A%E8%A6%81%E5%81%9A%E7%9A%843%E4%BB%B6%E4%BA%8B/[……]

閱讀更多