Blog

2017年7月14日星期五

[主機]bluehost更換php version

Log in to your Bluehost account.
Under Programming click PHP Config.
Select the version of PHP you're interested in using.
Click Save Change

2017年4月13日星期四

[woocommerce]woocommerce 3.0 product image gallery

woocommerce 3.0升級上去後，在product image gallery這邊有了非常大的變化。

2.6以前在"設定"->"商品"選項裡可以選擇的燈箱效果拿掉了，
導致商品頁的lightbox等效果通通失效。

主要是因為3.0後，woocommerce採取更多樣化的選擇提供給使用者去選擇更多的功能。

詳細資訊可看
https://woocommerce.com/2017/04/woocommerce-3-0-release/

目前解決方式如下

在主題的function.php裡面增加下列程式碼

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

回到前台商品頁
功能有出來了但是css的部分能然要設定一下

/* WooCommerce 3.0 Gallery */

.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}

.woocommerce-product-gallery figure {
margin: 0
}

.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}

.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}

.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}

.woocommerce-product-gallery img {
display: block
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}

.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}

.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}

.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}

a.woocommerce-product-gallery__trigger {
text-decoration: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: "\f00e";
line-height: 2;
text-indent: 0;
}

參考資料
https://createandcode.com/broken-photo-gallery-and-lightbox-after-woocommerce-3-0-upgrade/

2017年3月24日星期五

[HTML]簡易選單製作

首先html部分

<div class="header" style="height:300px;">
</div>
<section class="section section--menu" id="Alonso">
<nav class="menu menu--alonso">
<ul class="menu__list">
<li class="menu__item"><a href="#" class="menu__link">NEWS</a></li>
<li class="menu__item"><a href="#" class="menu__link">PROJECT</a></li>
<li class="menu__item"><a href="#" class="menu__link">RESERVATION</a></li>
<li class="menu__item"><a href="#" class="menu__link">CONTECT</a></li>
</ul>
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
<li><a href="#">NEWS</a></li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">RESERVATION</a></li>
<li><a href="#">CONTECT</a></li>
</ul>
</div>
</nav>
</section>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>

CSS部分

<style>
body{
padding:0;
margin:0;
}
a {
text-decoration: none;
color: #4e3c3e;
outline: none;
}
a:hover,
a:focus {
color: #f48b95;
}
.section {
}
.menu--alonso{
display:block;
}
.section--menu {
position: relative;
}
.menu {
line-height: 1;
margin: 0 auto 3em;
}
.menu__list {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
background: burlywood;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__list .selected a{
color: #f48b95;
}

.menu__link {
font-size: 1.05em;
font-weight: bold;
display: block;
padding: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu__link:hover,
.menu__link:focus {
outline: none;
}
/* mobile style */
#dl-menu{
display: none;
}
.dl-menuwrapper button {
background: #ccc;
border: none;
width: 48px;
height: 45px;
text-indent: -900em;
overflow: hidden;
position: relative;
cursor: pointer;
outline: none;
}
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
background: #aaa;
}
.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 5px;
background: #fff;
top: 10px;
left: 16%;
box-shadow:
0 10px 0 #fff,
0 20px 0 #fff;
}
.dl-menuwrapper ul {
padding: 0;
list-style: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.dl-menuwrapper li {
position: relative;
min-width: 300px;
}
.dl-menuwrapper li a {
display: block;
position: relative;
padding: 15px 20px;
font-size: 16px;
line-height: 20px;
font-weight: 300;
color: #fff;
outline: none;
}
.no-touch .dl-menuwrapper li a:hover {
background: rgba(255,248,213,0.1);
}
.dl-menuwrapper .dl-menu {
margin: 5px 0 0 0;
width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
}
.dl-menuwrapper .dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
@media screen and (max-width:1025px) {
.menu__list {
display: none;
}
#dl-menu{
display: block;
width: 100%;
text-align: center;
}
}
</style>

javascript部分

<script>
jQuery(document).ready(function(){
jQuery('.menu__item').click(function(){
jQuery(this).addClass('selected');
jQuery(this).siblings('.selected').removeClass('selected');
});

var flag = false;
jQuery('.dl-trigger').click(function(){
if(flag == false){
jQuery(this).parents().find('.dl-menu').addClass('dl-menuopen');
flag = true;
}else{
jQuery(this).parents().find('.dl-menu').removeClass('dl-menuopen');
flag = false;
}
});
});
</script>
<script>
jQuery(document).ready(function(){
var hh = jQuery('.header').height();
var window_height;
jQuery(window).scroll(function() {
window_height = jQuery(document).scrollTop();
if(window_height > hh){
jQuery('.menu__list').css({position: 'fixed',top: '0', width: '100%', 'z-index': '9999', background: 'rgb(255, 255, 255)', left: '0px', height: '120px'});
}else{
jQuery('.menu__list').css({position: "relative"});
}
});
});
</script>

2017年3月7日星期二

[Wordpress]解決Allowed memory size of XXXXXX bytes exhausted

Wordpress在安裝許多外掛之後，突然發現admin_ajax.php發生錯誤，
經過找尋原因後發現是Allowed memory size of XXXXXX bytes exhausted的問題，
由於主機是國外租用的無法修改php.ini檔，
故在wp-config.php這隻檔案加上
ini_set('memory_limit', '256M');
這段語法即可。

2017年1月18日星期三

[css]svg動態範例

html部分:
<div id="svg_test">
<svg version="1.1" id="svg_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="967px" height="1000px" viewBox="0 0 96.718 100.027" enable-background="new 0 0 96.718 100.027" xml:space="preserve">
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M6.218,48.542c0-14.534,7.407-27.361,18.645-34.927v-0.918C13.176,20.367,5.434,33.558,5.434,48.542
c0,22.129,16.876,40.399,38.443,42.642v-0.792C22.743,88.149,6.218,70.242,6.218,48.542z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M33.83,8.239v0.835c4.54-1.671,9.416-2.628,14.527-2.628c5.115,0,9.991,0.957,14.532,2.628V8.239
c-4.548-1.64-9.425-2.58-14.532-2.58C43.251,5.659,38.376,6.599,33.83,8.239z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M90.495,48.542c0,21.695-16.518,39.607-37.652,41.85v0.792c21.569-2.247,38.441-20.513,38.441-42.642
c0-14.984-7.744-28.175-19.429-35.845v0.918C83.09,21.181,90.495,34.008,90.495,48.542z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M48.357,0.232c-5.06,0-9.938,0.788-14.527,2.232v1.397v0.232v1.391c4.57-1.548,9.443-2.417,14.527-2.417
c5.087,0,9.959,0.875,14.532,2.417V4.094V3.862V2.465C58.299,1.02,53.417,0.232,48.357,0.232z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M2.834,48.542c0-16.481,8.852-30.902,22.028-38.875V8.136V7.881V6.354C10.05,14.62,0,30.418,0,48.542
C0,73.67,19.308,94.356,43.877,96.629v-1.312v-0.222v-1.304C20.874,91.531,2.834,72.105,2.834,48.542z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M71.855,6.354v1.527V8.14v1.527c13.179,7.973,22.027,22.394,22.027,38.875c0,23.563-18.037,42.989-41.04,45.244v1.31
v0.222v1.304c24.57-2.271,43.876-22.958,43.876-48.079C96.718,30.418,86.669,14.62,71.855,6.354z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M48.357,82.788c-1.652,0-2.996,1.071-2.996,2.384v5.313v0.785v2.59v1.31v0.227v1.303v0.95
c0,1.314,1.343,2.379,2.996,2.379c1.657,0,3.003-1.064,3.003-2.379v-0.95v-1.303v-0.227v-1.31v-2.59v-0.785v-5.313
C51.36,83.859,50.014,82.788,48.357,82.788z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M29.35,0c-1.657,0-3.005,1.064-3.005,2.373v3.205v1.456v0.238v1.494v3.032v0.917v2.14c0,1.313,1.349,2.379,3.005,2.379
c1.654,0,2.999-1.066,2.999-2.379V9.617V8.781V6.029V4.638V4.404V3.009V2.373C32.349,1.064,31.004,0,29.35,0z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M67.369,17.233c1.656,0,3.004-1.066,3.004-2.379v-2.14v-0.917V8.765V7.271V7.033V5.577V2.373
C70.373,1.064,69.025,0,67.369,0c-1.655,0-2.999,1.064-2.999,2.373v0.637v1.395v0.234v1.391v2.751v0.836v5.237
C64.37,16.167,65.713,17.233,67.369,17.233z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M31.079,45.283c4.079-1.162,7.878-3.426,10.91-6.469c2.961-2.959,5.179-6.657,6.368-10.618
c1.196,3.96,3.411,7.658,6.374,10.618c3.027,3.043,6.837,5.307,10.904,6.469c4.065,1.152,8.412,1.261,12.3-0.103
c-3.868-1.364-7.261-2.765-10.354-4.591c-3.082-1.787-5.836-3.91-8.279-6.341c-2.442-2.439-4.564-5.193-6.36-8.272
c-1.824-3.08-3.229-6.486-4.584-10.341c-1.355,3.855-2.762,7.261-4.583,10.341c-1.793,3.079-3.917,5.833-6.361,8.272
c-2.447,2.432-5.198,4.555-8.281,6.341c-3.088,1.826-6.486,3.227-10.351,4.591C22.668,46.544,27.014,46.435,31.079,45.283z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M59.301,59.688c-2.442-2.439-4.564-5.192-6.36-8.271c-1.824-3.082-3.229-6.487-4.584-10.342
c-1.355,3.855-2.762,7.261-4.583,10.342c-1.793,3.079-3.917,5.832-6.361,8.271c-2.447,2.433-5.198,4.55-8.281,6.341
c-3.088,1.82-6.486,3.227-10.351,4.59c3.887,1.368,8.232,1.259,12.297,0.113c4.079-1.169,7.878-3.433,10.91-6.477
c2.961-2.96,5.179-6.658,6.368-10.617c1.196,3.959,3.411,7.657,6.374,10.617c3.027,3.044,6.837,5.308,10.904,6.477
c4.065,1.146,8.412,1.255,12.3-0.113c-3.868-1.363-7.261-2.77-10.354-4.59C64.499,64.237,61.745,62.12,59.301,59.688z"/>

</svg>
</div>

css部分:
<style>
#svg_test{
text-align: center;
}
#svg_1{
fill: #000000;
width: 500px;
height: 500px;
stroke: #000000;
}
#svg_test2{
text-align: center;
}
#svg_2{
margin: 0 auto;
}
.path {
fill-opacity: 0;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-name: DrawLine, FillIn;
animation-duration: 10s, 10s;
}

@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes DrawLine {
to { stroke-dashOffset: 0; }
}

@keyframes FadeStroke {
to { stroke-opacity: 0; }
}

@keyframes FillIn {
from { fill-opacity: 0; }
to { fill-opacity: 1; }
}
@keyframes fill{
0% {
fill: black;
}
50% {
fill: white;
}
100% {
fill: black;
}
}
</style>

2016年12月29日星期四

[site5]自訂php.ini

1.在 File Manager>public_html目錄下新增存.user.ini文件
2.用ftp下載下來後修改內容
3.在空白文件輸入memory_limit = 128M等等指令後儲存檔案
4.上傳回public_html目錄下
即可修改php.ini的內容

參考網址
https://kb.site5.com/php/how-to-make-custom-php-changes-using-a-user-ini-file/

2016年12月6日星期二

[photoshop]複製圖層到新檔

變成複製圖案的大小

影像->修剪->確定

訂閱：文章 (Atom)

Blog

2017年7月14日星期五

[主機]bluehost更換php version

2017年4月13日星期四

[woocommerce]woocommerce 3.0 product image gallery

2017年3月24日星期五

[HTML]簡易選單製作

2017年3月7日星期二

[Wordpress]解決Allowed memory size of XXXXXX bytes exhausted

2017年1月18日星期三

[css]svg動態範例

2016年12月29日星期四

[site5]自訂php.ini

2016年12月6日星期二

[photoshop]複製圖層到新檔

[Laravel]環境架設，使用docker + laradock

搜尋此網誌

2017年7月14日 星期五

2017年4月13日 星期四

2017年3月24日 星期五

2017年3月7日 星期二

2017年1月18日 星期三

2016年12月29日 星期四

2016年12月6日 星期二

2017年7月14日星期五

2017年4月13日星期四

2017年3月24日星期五

2017年3月7日星期二

2017年1月18日星期三

2016年12月29日星期四

2016年12月6日星期二