零基础搭建自己的博客网站和配置CDN设置wordpress篇

零基础搭建自己的博客网站

博客类的建站程序有很多例如wordpress、 typecho、zblog、emlog等等这几种是最常见的

平时我们用的见的更多的都是wordpress，因为wordpress的风格模板多，各类应用插件多，适合新手，特别容易上手

我们今天就讲使用wordpress来搭建自己的博客，是零基础哦！

这篇文章会讲到包括如何配置SSL（https），如何配置CDN（腾讯云和百度云）和CDN的缓存设置

一、准备工作

首先我们需要一台linux的服务器，至于为什么用linux的服务器，因为Linux服务器比Windows服务器稳定性高，占用内存少，Linux服务器能承受负荷普遍比Windows高20%以上

然后我们在linux的服务器上面安装好宝塔面板，之前有写过教程 小白入门基础傻瓜式操作PHP面板安装使用——Bt宝塔面板，不会安装宝塔面板可以参考一下这个篇文章

安装好宝塔面板以后，我们来下载一下wordpress的程序，网址是：https://cn.wordpress.org/download/ 点击下载

二、安装wordpress、配置SSL

我们打开宝塔面板点击网站，添加站点，设置好自己要用的域名，数据库选项点击创建，面板会自动生成用户名和密码要记住，我们记下来安装会用到，选择你在面板安装的php版本推荐PHP5.6以上，点击提交

接下来我们到域名服务商解析一下我们的网站

返回宝塔面板，点击左侧菜单里面的文件管理找到刚才新建好的网站文件夹，进入后点击上传把我们下载好的wordpress的压缩包上传，点击压缩包选择解压

然后点击左侧网站按钮，找到刚新建好的网站设置SSL，宝塔面板可以一键申请部署SSL证书比较简单，不用再去别的服务商手动提交资料申请了，部署好以后记得点击强制HTTPS ，配置以后点击保存，接下里我们开始在线安装

在浏览器输入你刚才解析好的域名 www.madapang.cn ，你会发现你的域名前面是不是多了一个锁头，这就证明配置SSL成功，进入安装页后选择简体中文语言，接下来按照提示填写我们之前生成好的数据库用户名密码然后下一步安装，配置你的站点信息，你的网站名称和后台登陆账号密码，密码最好设置的复杂一点，因为是演示我就随便设置了一个，他提示我的密码比较弱，在这总情况下把下面的确认使用弱密码勾选上就可以完成安装了

到了这一步我们的网站就已经搭建好了，我们来登陆后台看一下

下面的是前台页面

到这里网站已经搭建好了，接下来讲一下配置CDN

三、配置CDN

有很多CDN的服务商，其实配置的过程都不尽相同，这里我就列举两个服务商，腾讯云&百度云，我使用这两个还蛮好用的，可能有些人对百度印象不太好，但是云服务这块我感觉还可以

1.腾讯云CDN配置

首先讲一下腾讯云CDN如何配置

打开腾讯云的CDN功能页，点击添加域名，进入后设置域名，源站设置输入你的服务器ip，业务类型选择静态加速然后点击提交

到了这里其实我们已经配置好了CDN，只要在复制下面这个CNAME域名再去域名服务商解析一下就可以了，但是我们的网站开了SSL（https），我们就需要在CDN上面也配置一下SSL证书，点击管理，高级配置-HTTPS配置-前往配置

到这下面的页面需要让我配置填写证书pem内容和key内容，我们返回宝塔面板找到网站设置SSL，点击其他证书，这个就是我们的pem和key的内容复制过去就可以下面这个截图是我填写好的，正常进来是空的

配置好以后我们点击提交即可，然后返回CDN的高级配置继续配置按照我下面的参考设置一下

我们返回域名管理页，是不是发现我们的额域名前面多了一把H的绿锁头，这就证明CDN的SSL证书配置好已经开启了

接下来我们复制一下CNAME的域名，到域名服务商解析一下，记录类型选择CNAME，记录值填写刚才复制来域名最后保存即可

到这里腾讯云CDN已经配置好了，接下来讲一下百度云的CDN配置

2.百度云CDN配置

打开百度云CDN页面，点击添加域名，进入后设置域名，业务分类选择图片小文件分类，主源站地址填写服务器ip，然后点击完成

新建好域名以后，同样的如果你没开SSL到这一步就结束了，如果开了接着往下看，我们点击管理，进入后找到HTTPS配置，点击开启，下面是没有可用证书的因为我们还没添加，点击管理我的证书后进入证书配置页面

还是和上面的步骤一样，去宝塔面板复制pem证书和密钥key过来填进去保存，然后在返回配置页面就有证书可以选择，然后保存

然后返回CDN的高级配置继续配置按照我下面的参考设置一下

返回到域名管理页，接下来我们复制一下CNAME的域名，到域名服务商解析一下，记录类型选择CNAME，记录值填写刚才复制来域名最后保存即可

到这里配置CDN部分我们也讲完了，接下来是wordpress的CDN缓存怎么设置

三、wordpressCDN缓存设置

下面是我在腾讯云和百度云的CDN配置截图大家可以参考修改一下就可以，切记不要缓存PHP文件和admin文件夹，如果不知道为什么的，可以试一下，就只知道了?

腾讯云缓存配置

百度云缓存配置

全篇都是零基础的东西，但是有些东西还是需要自己百度去了解一下Linux服务器，什么是SSL，什么是CDN，配置了对网站有什么用处等等

写篇文章是真的不容易，今天就到这里了

原文链接：https://www.madapang.com/technology/buildwordpress.html

拜拜ヾ(•ω•`)o

wordpress进阶教程(十):后台创建自定义面板类文件

丢了这么多天没更新教程了，自己写到哪里都快忘了。。

前面几篇教程演示了如何在wordpress后台文章编辑页面添加自定义面板，今天的这篇文章不能算教程，和wordpress后台教程的结尾一样，直接放出一个便于使用的类文件，实际使用的时候只需要包含这个类文件，然后加载配置文件即可使用。

使用该类文件可以创建标题、文本框、文本域、下拉框、复选框、图片实时预览上传。不过少了单选框(radio)和文本编辑器，因为个人很少用到这两个，所以就没加上，如果有需要的，完全可以参照我们前面几篇教程自己添加上。

说实话，这个类文件也不完全是我写的，我也是从一个主题上弄来的，然后修改。

文件下载(压缩包内功四个文件，分别是类文件、配置文件、js文件、css文件)

懒人下载

版本控制

2013.07.08，版本1.0

1. 修改复选框功能
2. 增加编辑器功能

类文件metaboxclass.php：

1. <?php   
2. /*
3. wordpress文章自定义字段类文件  
4. Version: 1.0  
5. Author: 树是我的朋友  
6. Author URI: http://www.ashuwp.com  
7. License: http://www.ashuwp.com/courses/highgrade/298.html  
8. */  
9. class ashu_meta_box{   
10.     var $options;   
11.     var $boxinfo;   
12.        
13.     //构造函数   
14.     function ashu_meta_box($options,$boxinfo){   
15.         $this->options = $options;   
16.         $this->boxinfo = $boxinfo;   
17.            
18.         add_action(\'admin_menu\', array(&$this, \'init_boxes\'));   
19.         add_action(\'save_post\', array(&$this, \'save_postdata\'));   
20.     }   
21.        
22.     //初始化   
23.     function init_boxes(){   
24.         $this->add_script_and_styles();   
25.         $this->create_meta_box();   
26.     }   
27.        
28.     //加载css和js脚本   
29.     function add_script_and_styles(){   
30.         if(basename( $_SERVER[\'PHP_SELF\']) == \"page.php\"    
31.         || basename( $_SERVER[\'PHP_SELF\']) == \"page-new.php\"    
32.         || basename( $_SERVER[\'PHP_SELF\']) == \"post-new.php\"    
33.         || basename( $_SERVER[\'PHP_SELF\']) == \"post.php\"  
34.         || basename( $_SERVER[\'PHP_SELF\']) == \"media-upload.php\")   
35.         {      
36.             //注意加载的脚本的url   
37.             wp_enqueue_style(\'metabox_fields_css\', TEMJS_URI. \'metabox_fields.css\');   
38.             wp_enqueue_script(\'metabox_fields_js\',TEMJS_URI. \'metabox_fields.js\');   
39.             wp_enqueue_style(\'thickbox\');   
40.             wp_enqueue_script(\'media-upload\');   
41.             wp_enqueue_script(\'thickbox\');   
42.                
43.   
44.             if(isset($_GET[\'hijack_target\']))   
45.             {      
46.                 add_action(\'admin_head\', array(&$this,\'add_hijack_var\'));   
47.             }   
48.         }   
49.     }   
50.        
51.     /*************************/  
52.     function add_hijack_var()   
53.     {   
54.         echo \"<meta name=\'hijack_target\' content=\'\".$_GET[\'hijack_target\'].\"\' />\\n\";   
55.     }   
56.        
57.     //创建自定义面板   
58.     function create_meta_box(){   
59.         if ( function_exists(\'add_meta_box\') && is_array($this->boxinfo[\'page\']) )    
60.         {   
61.             foreach ($this->boxinfo[\'page\'] as $area)   
62.             {      
63.                 if ($this->boxinfo[\'callback\'] == \'\') $this->boxinfo[\'callback\'] = \'new_meta_boxes\';   
64.                    
65.                 add_meta_box(      
66.                     $this->boxinfo[\'id\'],    
67.                     $this->boxinfo[\'title\'],   
68.                     array(&$this, $this->boxinfo[\'callback\']),   
69.                     $area, $this->boxinfo[\'context\'],    
70.                     $this->boxinfo[\'priority\']   
71.                 );     
72.             }   
73.         }     
74.     }   
75.        
76.     //创建自定义面板的显示函数   
77.     function new_meta_boxes(){   
78.         global $post;   
79.         //根据类型调用显示函数   
80.         foreach ($this->options as $option)   
81.         {                  
82.             if (method_exists($this, $option[\'type\']))   
83.             {   
84.                 $meta_box_value = get_post_meta($post->ID, $option[\'id\'], true);    
85.                 if($meta_box_value != \"\") $option[\'std\'] = $meta_box_value;     
86.                    
87.                 echo \'<div class=\"alt kriesi_meta_box_alt meta_box_\'.$option[\'type\'].\' meta_box_\'.$this->boxinfo[\'context\'].\'\">\';   
88.                 $this->$option[\'type\']($option);   
89.                 echo \'</div>\';   
90.             }   
91.         }   
92.            
93.         //隐藏域   
94.         echo\'<input type=\"hidden\" name=\"\'.$this->boxinfo[\'id\'].\'_noncename\" id=\"\'.$this->boxinfo[\'id\'].\'_noncename\" value=\"\'.wp_create_nonce( \'ashumetabox\' ).\'\" />\';     
95.     }   
96.        
97.     //保存字段数据   
98.     function save_postdata() {   
99.         if( isset( $_POST[\'post_type\'] ) && in_array($_POST[\'post_type\'],$this->boxinfo[\'page\'] ) && (isset($_POST[\'save\']) || isset($_POST[\'publish\']) ) ){   
100.         $post_id = $_POST[\'post_ID\'];   
101.            
102.         foreach ($this->options as $option) {   
103.             if (!wp_verify_nonce($_POST[$this->boxinfo[\'id\'].\'_noncename\'], \'ashumetabox\')) {      
104.                 return $post_id ;   
105.             }   
106.             //判断权限   
107.             if ( \'page\' == $_POST[\'post_type\'] ) {   
108.                 if ( !current_user_can( \'edit_page\', $post_id  ))   
109.                 return $post_id ;   
110.             } else {   
111.                 if ( !current_user_can( \'edit_post\', $post_id  ))   
112.                 return $post_id ;   
113.             }   
114.             //将预定义字符转换为html实体   
115.             if( $option[\'type\'] == \'tinymce\' ){   
116.                     $data =  stripslashes($_POST[$option[\'id\']]);   
117.             }elseif( $option[\'type\'] == \'checkbox\' ){   
118.                     $data =  $_POST[$option[\'id\']];   
119.             }else{   
120.                 $data = htmlspecialchars($_POST[$option[\'id\']], ENT_QUOTES,\"UTF-8\");   
121.             }   
122.                
123.             if(get_post_meta($post_id , $option[\'id\']) == \"\")   
124.             add_post_meta($post_id , $option[\'id\'], $data, true);   
125.                
126.             elseif($data != get_post_meta($post_id , $option[\'id\'], true))   
127.             update_post_meta($post_id , $option[\'id\'], $data);   
128.                
129.             elseif($data == \"\")   
130.             delete_post_meta($post_id , $option[\'id\'], get_post_meta($post_id , $option[\'id\'], true));   
131.                
132.         }   
133.         }   
134.     }   
135.     //显示标题   
136.     function title($values){   
137.         echo \'<p>\'.$values[\'name\'].\'</p>\';   
138.     }   
139.     //文本框   
140.     function text($values){    
141.         if(isset($this->database_options[$values[\'id\']])) $values[\'std\'] = $this->database_options[$values[\'id\']];   
142.            
143.         echo \'<p>\'.$values[\'name\'].\'</p>\';   
144.         echo \'<p><input type=\"text\" size=\"\'.$values[\'size\'].\'\" value=\"\'.$values[\'std\'].\'\" id=\"\'.$values[\'id\'].\'\" name=\"\'.$values[\'id\'].\'\"/>\';   
145.         echo $values[\'desc\'].\'<br/></p>\';   
146.         echo \'<br/>\';   
147.     }   
148.     //文本域   
149.     function textarea($values){   
150.         if(isset($this->database_options[$values[\'id\']])) $values[\'std\'] = $this->database_options[$values[\'id\']];   
151.            
152.         echo \'<p>\'.$values[\'name\'].\'</p>\';   
153.         echo \'<p><textarea class=\"kriesi_textarea\" cols=\"60\" rows=\"5\" id=\"\'.$values[\'id\'].\'\" name=\"\'.$values[\'id\'].\'\">\'.$values[\'std\'].\'</textarea>\';   
154.         echo $values[\'desc\'].\'<br/></p>\';   
155.         echo \'<br/>\';   
156.     }   
157.     //媒体上传   
158.     function media($values){   
159.         if(isset($this->database_options[$values[\'id\']])) $values[\'std\'] = $this->database_options[$values[\'id\']];   
160.            
161.         //图片上传按钮   
162.         global $post_ID, $temp_ID;   
163.         $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);   
164.         $media_upload_iframe_src = \"media-upload.php?post_id=$uploading_iframe_ID\";   
165.         $image_upload_iframe_src = apply_filters(\'image_upload_iframe_src\', \"$media_upload_iframe_src&amp;type=image\");   
166.            
167.         $button = \'<a href=\"\'.$image_upload_iframe_src.\'&amp;hijack_target=\'.$values[\'id\'].\'&amp;TB_iframe=true\" id=\"\'.$values[\'id\'].\'\" class=\"k_hijack button thickbox\" onclick=\"return false;\" >上传</a>\';   
168.            
169.         //判断图片格式,图片预览   
170.         $image = \'\';   
171.         if($values[\'std\'] != \'\') {   
172.             $fileextension = substr($values[\'std\'], strrpos($values[\'std\'], \'.\') + 1);   
173.             $extensions = array(\'png\',\'gif\',\'jpeg\',\'jpg\',\'pdf\',\'tif\');   
174.                
175.             if(in_array($fileextension, $extensions))   
176.             {   
177.                 $image = \'<img src=\"\'.$values[\'std\'].\'\" />\';   
178.             }   
179.         }   
180.            
181.         echo \'<div id=\"\'.$values[\'id\'].\'_div\" class=\"kriesi_preview_pic\">\'.$image .\'</div>\';   
182.         echo \'<p>\'.$values[\'name\'].\'</p><p>\';   
183.         if($values[\'desc\'] != \"\") echo \'<p>\'.$values[\'desc\'].\'<br/>\';   
184.         echo \'<input class=\"kriesi_preview_pic_input\" type=\"text\" size=\"\'.$values[\'size\'].\'\" value=\"\'.$values[\'std\'].\'\" name=\"\'.$values[\'id\'].\'\"/>\'.$button;   
185.         echo \'</p>\';   
186.         echo \'<br/>\';   
187.     }   
188.     //单选框   
189.     function radio( $values ){   
190.         if(isset($this->database_options[$values[\'id\']]))   
191.             $values[\'std\'] = $this->database_options[$values[\'id\']];   
192.         echo \'<p>\'.$values[\'name\'].\'</p>\';   
193.         foreach( $values[\'buttons\'] as $key=>$value ) {   
194.             $checked =\"\";   
195.             if($values[\'std\'] == $key) {   
196.                 $checked = \'checked = \"checked\"\';   
197.             }   
198.             echo \'<input \'.$checked.\' type=\"radio\" class=\"kcheck\" value=\"\'.$key.\'\" name=\"\'.$values[\'id\'].\'\"/>\'.$value;   
199.         }   
200.     }   
201.     //复选框   
202.     function checkbox($values){   
203.         echo \'<p>\'.$values[\'name\'].\'</p>\';   
204.         foreach( $values[\'buttons\'] as $key=>$value ) {   
205.             $checked =\"\";   
206.             if( is_array($values[\'std\']) && in_array($key,$values[\'std\'])) {   
207.                 $checked = \'checked = \"checked\"\';   
208.             }   
209.             echo \'<input \'.$checked.\' type=\"checkbox\" class=\"kcheck\" value=\"\'.$key.\'\" name=\"\'.$values[\'id\'].\'[]\"/>\'.$value;   
210.         }   
211.         echo \'<label for=\"\'.$values[\'id\'].\'\">\'.$values[\'desc\'].\'</label><br/></p>\';   
212.     }   
213.     //下拉框   
214.     function dropdown($values){   
215.         echo \'<p>\'.$values[\'name\'].\'</p>\';   
216.             //选择内容可以使页面、分类、菜单、侧边栏和自定义内容   
217.             if($values[\'subtype\'] == \'page\'){   
218.                 $select = \'Select page\';   
219.                 $entries = get_pages(\'title_li=&orderby=name\');   
220.             }else if($values[\'subtype\'] == \'cat\'){   
221.                 $select = \'Select category\';   
222.                 $entries = get_categories(\'title_li=&orderby=name&hide_empty=0\');   
223.             }else if($values[\'subtype\'] == \'menu\'){   
224.                 $select = \'Select Menu in page left\';   
225.                 $entries = get_terms( \'nav_menu\', array( \'hide_empty\' => false ) );   
226.             }else if($values[\'subtype\'] == \'sidebar\'){   
227.                 global $wp_registered_sidebars;   
228.                 $select = \'Select a special sidebar\';   
229.                 $entries = $wp_registered_sidebars;   
230.             }else{     
231.                 $select = \'Select...\';   
232.                 $entries = $values[\'subtype\'];   
233.             }   
234.            
235.             echo \'<p><select class=\"postform\" id=\"\'. $values[\'id\'] .\'\" name=\"\'. $values[\'id\'] .\'\"> \';   
236.             echo \'<option value=\"\">\'.$select .\'</option>  \';   
237.                
238.             foreach ($entries as $key => $entry){   
239.                 if($values[\'subtype\'] == \'page\'){   
240.                     $id = $entry->ID;   
241.                     $title = $entry->post_title;   
242.                 }else if($values[\'subtype\'] == \'cat\'){   
243.                     $id = $entry->term_id;   
244.                     $title = $entry->name;   
245.                 }else if($values[\'subtype\'] == \'menu\'){   
246.                     $id = $entry->term_id;   
247.                     $title = $entry->name;   
248.                 }else if($values[\'subtype\'] == \'sidebar\'){   
249.                     $id = $entry[\'id\'];   
250.                     $title = $entry[\'name\'];   
251.                 }else{   
252.                     $id = $entry;   
253.                     $title = $key;                 
254.                 }   
255.   
256.                 if ($values[\'std\'] == $id ){   
257.                     $selected = \"selected=\'selected\'\";     
258.                 }else{   
259.                     $selected = \"\";        
260.                 }   
261.                    
262.                 echo\"<option $selected value=\'\". $id.\"\'>\". $title.\"</option>\";   
263.             }   
264.            
265.         echo \'</select>\';   
266.         echo $values[\'desc\'].\'<br/></p>\';    
267.         echo \'<br/>\';   
268.     }   
269.        
270.     //编辑器   
271.     function tinymce($values){   
272.         if(isset($this->database_options[$values[\'id\']]))   
273.             $values[\'std\'] = $this->database_options[$values[\'id\']];   
274.            
275.         echo \'<p>\'.$values[\'name\'].\'</p>\';   
276.         wp_editor( $values[\'std\'], $values[\'id\'] );   
277.         //wp_editor( $values[\'std\'], \'content\', array(\'dfw\' => true, \'tabfocus_elements\' => \'sample-permalink,post-preview\', \'editor_height\' => 360) );   
278.         //带配置参数   
279.         /*wp_editor($meta_box[\'std\'],$meta_box[\'name\'].\'_value\', $settings = array(quicktags=>0,//取消html模式
280.         tinymce=>1,//可视化模式  
281.         media_buttons=>0,//取消媒体上传  
282.         textarea_rows=>5,//行数设为5  
283.         editor_class=>\"textareastyle\") ); */  
284.     }   
285.   
286. }   
287. ?>