WordPress 添加自定義代碼
修改functions.php檔
加入：
function get_word($atts) {return 'Hello I am Dorigo';}
add_shortcode('hello', 'get_word');
之後在文章中輸入[hello]
就會顯示Hello I am Dorigo
可以用在廣告代碼顯示^^
CSS 線上工具
- 功能齊全CSS的產生器 - http://www.css3maker.com/
- CSS 圓角產生器 - http://border-radius.com/
- CSS 漸層色產生器 - http://www.colorzilla.com/gradient-editor/
- CSS 按鈕產生器 - http://css-tricks.com/examples/ButtonMaker/
WordPress 側邊欄固定在畫面上
第一種方式：
在</body>之前貼入以下原始碼：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://yourjavascript.com/93235116219/sidebar-follow.js"></script>
<script>
/* <![CDATA[ */
(new SidebarFollow()).init({
element: jQuery('#sidebar-follow'),
distanceToTop: 15
});
/* ]]> */
</script>
於小工具中貼入
<div id="sidebar-follow">要固定在畫面上的原始碼</div>
第二種方式：
安裝外掛：Q2W3 Fixed Widget
簡單的php圖片上傳範例
此範例中，網站目錄會有兩個檔案(index.html & upload.php)及一個資料夾uploads
先編輯php.ini檔
設定file_uploads = On
index.html檔案程式碼如下：
<!DOCTYPE html> <html> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> Select image to upload: <input type="file" name="fileToUpload" id="fileToUpload"> <input type="submit" value="Upload Image" name="submit"> </form> </body> </html>
upload.php檔案程式碼如下：
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
echo "圖片網址 http://dorigo.dr104.com.tw/test/uploads/". basename( $_FILES["fileToUpload"]["name"]);
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
CSS筆記
讓英文字元自動斷行
body{ word-wrap: break-word; word-break: break-all; }
CSS等高
#wrap { overflow:hidden; }
#left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }
透明
color: rgba(255, 255, 255, 0.8);
background-color: rgba(142, 213, 87, 0.3);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
文字陰影
text-shadow: x軸位移 y軸位移 柔邊 顏色
例如：
text-shadow: 1px 1px 2px #777;
box-shadow
.shadow {
box-shadow: 3px 3px 3px 3px #669FEC;
}
Class 跟 ID 的比較
這兩者最大的不同，是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方，是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用，而 Class 選擇器無法被 Javascript 運用到。
box-sizing: border-box;
避免預設寬度被margin padding等元素撐開
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
clear: left;
元素加上一個 clear: left; 可以避免其他有標示 float: left;的元素影響
overflow: auto;
內容高度可隨著其他有標示float的元素做變化
.clearfix {
overflow: auto;
}
width: 50%;
@media screen
介紹：http://fundesigner.net/css3-media-queries/
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
column-count
實現多欄文字
http://kayeteaches.blogspot.tw/2013/03/css3-multiple-columns.html
flex
RWD設計超方便
http://www.oxxostudio.tw/articles/201501/css-flexbox.html
CSS 字型大小 pt, px , em , 百分比 percent 之比較
※ 1em=100%=12pt=16px
※ 0.75em=75%=9pt=12px
pt: 一般印列用字體尺寸，
px: 像素單位(pixel)
em:同百分比，1em=100%=12pt=16px = 瀏覽器預設尺寸，通常是 16px，em可以使用階層的方式設定，如第一層設定為2em，其子階層設定為 0.5em， 則子階層的實際尺寸為(2*0.5 = 1em)
percent(%): 同上，如第一層設定為200%，其子階層設定為 50%， 則子階層的實際尺寸為(200%*50% = 100%)
在CSS檔中嵌入所要的字型語法
字型若是ttf轉檔可轉成woff(網頁開放字型格式)：https://fontconverter.com/
將woff上傳至fonts目錄
@font-face {
font-family:"HonyaJi";
src: url("/fonts/HonyaJi.woff") format("woff");
}
body {
font-family: 'HonyaJi' ;
}
font-family: system-ui; (使用系統字型)
泰國好好玩系列
