熱門文章

顯示具有 架站教學 標籤的文章。 顯示所有文章
顯示具有 架站教學 標籤的文章。 顯示所有文章

2016年11月27日 星期日

[WordPress開發流程大公開!]本機開發再完整備份上線(Mac,Win)

WordPress是一個以PHPMySQL為平台的自由開源的部落格軟體和內容管理系統content management system (CMS)WordPress具有外掛模組架構和模板系統。Alexa排行前100萬的網站中有超過16.7%的網站使用WordPress。到了20118月,約22%的新網站採用了WordPressWordPress是目前網際網路上最流行的部落格系統。
本地測試軟體:MAMP(意思是My Aoache MySQK PHP 的縮寫)



MAMP是一個整合工具讓你在幾秒之內安裝好伺服器環境,有免費版跟付費版。讓你不用碰到任何的程式碼、煩雜的設定即可以快速的建置網路伺服器環境,而且當你不需要時只要刪除MAMP資料夾不會影響電腦原本的設定 (i.e. MAMP does not modify any of the "normal" system).


使用步驟大致是

  1. 安裝MAMP
  2. 啟動MAMP
  3. 放置wordpress至根目錄
  4. 建立資料庫
  5. 設定wp-config
  6. 完成本機模式




安裝方法:基本上就是就是下一步下一步就完成了。如安裝過程有問題可以看看這裡


開啟: 大象圖示的MAMP 或MAMP(試用),不過以下為MAMP教學


MAMP架站整合軟體
雖然是英文版,但是操作簡單,現在先點左邊的齒輪(Preferences)
MAMP change ports
預設的Port為8888 & 8889,我們現在點擊最下面的"Set Web & MySQL to 80 & 3306"
將它改為80&3306,接著OK


MAMP start servers
接著我們點擊右邊的"Start Servers"啟動伺服器,啟動時圖示變為綠色
接著按中間的"Open WebStart page"
MAMP Welcome page


看到以上畫面代表成功一半了,接著點擊上排左邊數來第二個"My Website"將會開啟以下頁面

在這裡可以看到你的網站資料夾是在 /Applications/MAMP/htdocs 下面

這裡就是我們要放wordpress的地方了(網站根目錄)
MAMP 網站根目錄
上圖可以看到我已經放了一些wordpress在上面了
若您是直接解壓縮在這裡,你的wp 網址會是 http://localhost
像我這樣則是 http://localhost/wordpress


接著,我們回到MAMP 歡迎畫面點擊上方左邊數來第四個" Tool >phpMyAdmin " 來建立我們的資料庫
phpmyadmin 新增資料庫

此範例我建立了test 資料庫


我們已經上傳了wordpress並且建立好資料庫,現在就瀏覽器開啟Wordpress所在位置
(此範例我放在http://localhost/ww)

衝吧! 設定我們的資料庫
在MAMP 歡迎頁面(http://localhost/MAMP/?language=English)的MySQL部分我們可以找到資料庫使用者名稱密碼均為"root" ,資料庫位址 就不須更動,如下圖填寫即可。






順利的在本機安裝好wordpress ,方便測試修改。
下一步驟,就是要教大家怎麼備份整個wordpress 以及還原或者搬運到其他host

前兩天建立的網路商店範例 供您參考 http://fujifilm.lionfree.net

第二部分-複製到host
如果還沒有買空間的話可以試試,免費Lionfree中文host教學

SaveSave
SaveSave

2016年11月26日 星期六

[WP]攝影作品主題-免費提供給你使用


wordpress免費攝影主題 fullscreen theme

Fullscreen theme 

一看到首頁就可以感受得到,用滿版的作品集來呈現。每張圖片都可以連結到該文章裡,可以很迅速地看到該系列作品。很棒的設計,不需要過多的文字去敘述。
首頁的文章是選擇某一個分類來做呈現,會直接取該文章的特色圖片裁切。文章是一欄式的設計。

Fullscreen is a free one-column photography and multimedia WordPress theme that provides visual artists a unique way of presenting their latest work using a minimalist side-scrolling homepage. Related


此主題有提供demo檔案可以匯入,套用此主題必須去修改縮圖的大小為200x200,更多說明詳見網站


2016年11月25日 星期五

[SEO]Google search console



 搜尋引擎最佳化入門指南 官方完整教學電子書

Google Search Console

點擊右上角新增內容以增加網站,可以增加含www.test.com 和 test.com 裸網域

新增您網站的所有版本
請務必新增「www」和「非 www」兩種版本的網站。此外,如果您使用 HTTPS 通訊協定,也請新增相關版本。





下載html檔案
利用ftp上傳到有index的那個資料夾
以openshift的wordpress為例是在
/var/lib/openshift/*********/app-root/data/current


點擊步驟三,會出現以下畫面,代表成功在點擊認證





當以上步驟完成時,會收到提示訊息如下,教你如何增加搜尋排名

Google 系統顯示,您最近已在 Search Console 中驗證自己的網站 (如果您是透過 Blogger 或 Google 協作平台建立網站,系統會自動完成驗證程序)。 為了協助您善用這項免費服務,有效提高網站在 Google 搜尋結果的排名,我們提供了一些實用提示讓您參考。

立即設定您的 Search Console 帳戶:

1
新增您網站的所有版本
請務必新增「www」和「非 www」兩種版本的網站。此外,如果您使用 HTTPS 通訊協定,也請新增相關版本。
2
選取偏好版本
選擇網站在 Google 搜尋中顯示時是否要加上「www」。
3
選擇目標國家/地區
如果網站主要是鎖定特定國家/地區的使用者,您可以設定地理區域偏好設定。
4
與同事共用存取權
如果您希望讓其他使用者存取您的報告,可以新增其他權限類型。
5
提交 Sitemap 檔案
這有助 Google 瞭解該如何檢索您的網站。

2016年11月11日 星期五

[WP]Lionfree免費空間建立Wordpress網站 - 01 安裝wordpress


Lionfree不是營利服務,我們是公眾化的免費服務,提供真正優質且自由的免費主機。Lionfree仰賴大眾的贊助營運,並且由 Lionfree 社群與 Lionfree Team 志工團隊進行管理與維護
提供您完整、親切的繁體中文主機管理介面,即使發生任何問題,您即可使用中文與我們的客服團隊交談,使您的問題能以最快的速度獲得解答!

註冊完lionfree 免費空間之後
接下來就是安裝wordpress了


2016年8月17日 星期三

[Raspberry Pi]安裝MySQL資料庫-part2

1.[Raspberry Pi]安裝PHP網頁伺服器-part1
2.[Raspberry Pi]安裝MySQL資料庫-part2
3.[Raspberry Pi]架設Wordpress英文版,並且中文化-part3
4.[Raspberry Pi]架設中文版Wordpress-part3B

請先安裝PHP網頁伺服器,再接下來安裝MySQL資料庫工具
此教學為遵照柯博文老師的Raspberry Pi超炫專案與完全實戰 之學習紀錄。


安裝MySQL

sudo apt-get install mysql-server


[Raspberry Pi]架設中文版Wordpress-part3B

在安裝wordpress之前請先參照先前的文章安裝
1.[Raspberry Pi]安裝PHP網頁伺服器-part1
2.[Raspberry Pi]安裝MySQL資料庫-part2
3.[Raspberry Pi]架設Wordpress英文版,並且中文化-part3
此教學為遵照柯博文老師的Raspberry Pi超炫專案與完全實戰 之學習紀錄。


WordPress 是一個開放原始碼網誌/内容管理系统,專注於美學、網頁標準和易用性的個人發佈平台。WordPress 兼具自由與無價,你可以下載並且免費使用。
目前已超過8000萬以上網站使用,在全世界的網站中26%是使用wordpress架設的,我也有架設我個人的攝影作品集- Fuji-X Tribe 。


安裝前,先用以下指令確認網頁根目錄是否為 /var/www 
sudo  nano /etc/apache2/sites-enabled/000-default.conf

[Raspberry Pi]架設Wordpress英文版,並且中文化-part3

在安裝wordpress之前請先參照先前的文章安裝
1.[Raspberry Pi]安裝PHP網頁伺服器
2.[Raspberry Pi]安裝MySQL資料庫
此教學為遵照柯博文老師的Raspberry Pi超炫專案與完全實戰 之學習紀錄。


WordPress 是一個開放原始碼網誌/内容管理系统,專注於美學、網頁標準和易用性的個人發佈平台。WordPress 兼具自由與無價,你可以下載並且免費使用。
目前已超過8000萬以上網站使用,在全世界的網站中26%是使用wordpress架設的,我也有架設我個人的攝影作品集- Fuji-X Tribe 。


安裝前,先用以下指令確認網頁根目錄是否為 /var/www 
sudo  nano /etc/apache2/sites-enabled/000-default.conf

[Raspberry Pi]安裝PHP網頁伺服器-part1

1.[Raspberry Pi]安裝PHP網頁伺服器-part1
2.[Raspberry Pi]安裝MySQL資料庫-part2
3.[Raspberry Pi]架設Wordpress英文版,並且中文化-part3
4.[Raspberry Pi]架設中文版Wordpress-part3B
此教學為遵照柯博文老師的Raspberry Pi超炫專案與完全實戰 之學習紀錄。

安裝

使用以下三行,先更新系統,在下載apache2和設定php5的指令
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install apache2 php5 libapache2-mod-php5

2016年8月3日 星期三

[WP]WP Memory Limit




 (code is at the beginning of /wp-includes/default-constants.php)


function wp_initial_constants() {
global $blog_id;
// set memory limits
if ( !defined('WP_MEMORY_LIMIT') ) {
if ( is_multisite() ) {
define('WP_MEMORY_LIMIT', '128M');
} else {
define('WP_MEMORY_LIMIT', '128M');
}
}

2016年7月21日 星期四

[WordPress][Plugin]jQuery Smooth Scroll

使用此簡單的外掛完成單頁指定位置滾動效果(請看範例),且在網站右下角加入返回頂端的快捷鍵(我是取消此功能,因主題原本就有)






效果設置方法

將某區塊加入 id 標籤如:
<section id="home"> ...
</section>

然後設置連結如 :

<a href="#home">Home</a>



還有我發現如果我的標籤是 tab開頭就沒有滾動效果 如 id="tab1" ,但是 id="1"就可以
不知道是什麼bug 或者衝突。


還有如果是 Dev Slider 的設定是

"Click" 後執行 "Simple Link"的動作 目標為 "#tab33"(就是這裡我設定tab開頭,沒有滾動效果) Link Type "a Tag Link" (預設的"jQuery Link"則不會有效果)

詳細教學可以看 這裡

取消返回頂端的快捷鍵-方法

1.編輯外掛


編輯 jquery-smooth-scroll/jquery-smooth-scroll.php

// add move to top button at wp_footer
// add_action( 'wp_footer',  array( &$this, 'wp_footer') );
將此行加入"//" 註解掉即可



[wordpress]10 個優化圖片的外掛

https://premium.wpmudev.org/blog/10-best-image-optimization-plugins-to-speed-up-your-wordpress-site/

還有tinypng 的可以用

2016年6月25日 星期六

[WordPress] 免費架設WP網站(Openshift空間+免費頂級網域+CloudFlare DNS)


  1. OpenShift 
  2. 免費頂級網域
  3. CloudFlare

 Openshift


首先 先申請 Openshift 帳號

新增Application ,選擇wordpress,輸入rhcloud.com 的客制網址
(目前填的是rhcloud.com的次級網域,後續設定成自訂的網域domain)


點擊 change alias
增加你申請的domain  假設你申請的是 hello.ml
那你必須申請兩個 www.hello.mlhello.ml 到alias

繼續進去 安裝wordpress

openshift 取得FTP管理權限
路徑
/var/lib/openshift/576a3cd589f5cfd1d4000047/app-root/data/current

wordpress 安裝後優化動作



wordpress 外掛

外掛頁面

Remove query strings from static resources like CSS & JS files.
Download Version 1.3


提高網站排名原素﹕結構化資料







如何令Google Search Result有六舊腹肌?(Google Sitelinks)


2016年6月15日 星期三

Openshift CloudFlare rhcloud.com

http://stackoverflow.com/a/26337432/6095895

It's a bit unusual, but when using services like Openshift/Heroku etc, there is no A record for the domain in your DNS. This is because there is no single A record corresponding to your site or app on the service.
If you've already set up the domain at your registrar using Cloudflare's nameservers (you need to do this!) there should be no need to do anything else at the registrar.
You need to set up one (or more) CNAMEs for the site/app at Cloudlare (if it's a website, you may want one each for e.g. example.com and www.example.com).
Assuming you do need the 'naked' domain and the www version, you'd do this:

Openshift

  1. Make sure you have domains set up for both the 'naked' domain and the www subdomain.

Cloudflare:

Back it up!

  • Cloudflare lets you export your DNS settings; do this before making any changes.

Naked domain

  1. go to the DNS settings page
  2. choose CNAME from the selector at bottom
  3. enter the-domain in the first field
  4. enter the-domain.rhcloud.com in the second ("is an alias of") field

www subdomain

  1. repeat steps 1-4 from above, but enter www for step 3.
  2. go to the "Page Rules" page
  3. add a new "page forwarding" rule that either:
    • redirects http://the-domain.com/* to http://www.the-domain.com/$1 or
    • redirects http://www.the-domain.com/* to http://the-domain.com/$1
    • choose '301' for the redirect type



此教學也使用 openshift +  https://my.freenom.com/ 的免費頂級網域


http://yamimoney.com/archives/759
闇黑網賺研究室,openshift +wordpress


2016年2月20日 星期六

[WP][Theme]Bubbles 視差滾動 主題 Parallax Theme

Bubbles 视差单页 WordPress主题 v1.3



Bubbles v1.3 - Parallax One Page WordPress Theme

Bubbles 視差單頁 WordPress主題 v1.3
Bubbles WordPress主題, 視差單頁主題,主要特點:響應設計,自適應,Visual Composer 頁面搭建,Revolution幻燈片,多個顏色,極簡設計,Retina 支持,字體圖標,提供演示和說明文檔等!
Bubbles WordPress主題演示地址:
Bubbles v1.3 WordPress主題下載地址:
如果以上網盤下載地址失效,請試試備用下載:備用下載  備用2

2016年2月16日 星期二

[翻譯]網頁架設工具

Want to build a website without needing to write any code? We select the best website builders to bring your vision to life. 

After hours of looking online for some web design inspiration, you're ready to get started with a new site and now need a website builder.  There are a multitude to choose from, so which is the best? Well, for a start, you'll be looking for a website builder that can create your website in the latest version of HTML, HTML5. And secondly, you'll want a tool that simplifies the process of web design and enables you to create a great site without needing to know a lot of programming or coding knowledge.
We've scoured the web to find you the best HTML5 website builders – in no particular order – that fit these requirements and more. Let us know how you get on!

想要架設一個網站而不需要編寫任何程式碼?我們精選了幾個網站架設器帶給你視覺生活。

經過幾個小時閱讀網路上的網站設計啟發 ,你已經準備好要開始架設一個新的網站且現在需要一個網站架設器。這裡有大量的選擇,哪一個是最好的?
一開始,你必須玄找一個網站架設器可以用最新的HTML5架設你的網站。
第二,你將需要一個工具來簡化網頁設計的過程及能夠讓你創造出好的網站且不需要知道太多程式碼或編碼知識。

我們已經搜尋網路並找給你最棒的HTML5網頁架設器 – 沒有特別排序 – 以下是符合我們需求的幾個推薦。讓我們知道你如何開始!

01. Webflow


Webflow
Webflow lets you create sites across a range of devices
Californian-based website building company Webflow is an astonishingly simple platform that gives everyone the power to build their perfect site across a range of devices.
Suited to designers, creative professionals and entrepreneurs, Webflow is a web design tool, CMS and hosting platform all in one. Create your dream site and update it personally without having to touch a single line of backend code.


02. BuilderEngine


 BuilderEngine
Create large websites on the Cloud with BuilderEngine

Promising to help users set-up and launch their site in seconds, BuilderEngine is an intuitive platform capable of creating any type of website.
Users can get started with a free trial package, complete with template themes and hosting, then choose add-ons from their constantly updating collections of apps. Capable of creating complex sites without coding, BuilderEngine  goes beyond basic text and images. If you ever get stuck you can also find one-to-one support by using their forums and Ticket Support Systems.




03. IM Creator


 IM Creator
IM Creator is free to use, and comes with some stunning templates

The IM Creator was introduced in 2011 and it quickly became one of the top HTML5 website builders online. The IM Creator hosts a huge library of stunning website templates in a long list of categories ranging from sports and medicine to business and academics.
You can start using the IM Creator immediately after registering for free. Start off with a blank page or choose a design of your choice from a library of hundreds of fully customizable website templates. Since the IM Creator is an HTML5 website builder, every website you create with it should work fine with all major mobile platforms.








04. SquareSpace


 SquareSpace
SquareSpace offers a free trial so you can find out if it's right for you

SquareSpace is a popular web-based HTML5 website builder that will help you create beautiful sites in a matter of minutes.
It offers a diverse range of website designs tailored for different occasions and industries. All the templates are compatible with mobile devices as well, and contain high resolution images and graphics to add further colour to your website. SquareSpace is a paid application but you can also use its free trial with limited options.







05. PrestaShop


 PrestaShop
PrestaShop is a great open-source ecommerce solution

French startup PrestaShop has released version 1.6 of its eponymous open-source ecommerce website builder with a revamped frontend experience plus a backend overhaul that focuses on the business intelligence side of things.
The most impressive thing about PrestaShop is its default theme, which is comfortably one of the best around – slick and easily customisable thanks to Sass Compass built-in. The back office is no less well-presented despite the huge depth of analytics that it contains, and both are fully responsive.





06. Dunked


 Dunked
Dunk lets you make a beautifully responsive online portfolio without touching a line of code

If you want to stand out, your online portfolio needs to stand out. But what happens when you don't know how to code? That's where Dunked are offering to fill the gap.
Dunked provides responsive designs that are Retina-ready and allow you to create an online portfolio without any coding difficulties. You can choose from a growing collection of professionally designed templates, that are pixel-perfect, customizable and easy to use.
Each template is fully responsive and will adapt itself to any mobile device - iPad, iPhone or Android. Adjust layout, colours and typography using a selection of preset options; there's also advanced CSS editing for those familiar with website markup.





07. Wix


 Wix
Wix has moved from Flash to become an HTML5-based website builder

Originally based on Flash, Wix has now switched to HTML5. Its unique template designs stand apart, making it a great way to create eye-catching websites. Wix is primarily a paid service but does offer a limited number of features in its free version as well.






08. Strikingly


 Strikingly
Sites built with Strikingly are visibly optimized for search engines

As the name suggests, Strikingly is an HTML5 website builder you can use to create beautiful websites and designs. Its templates are not only eye-catching but are also completely responsive and compatible with major mobile platforms. They are also visibly optimized for search engines with extremely quick load times. Strikingly also offers in-depth analytics for every site you build with it.







09. Easy WebContent


 Easy WebContent
Easy WebContent has recently begun to embrace HTML5

Easy WebContent is another beautiful website builder that allows you to build HTML5 websites. Currently, it allows you to create websites in various forms and it recently started to embrace the HTML5 technology. You can create HTML5 websites in a matter of minutes. Begin by simply registering with the EWC Presenter for free. Once registered, you will have the option to select a theme for your website from a number of stunningly beautiful and eye-catching templates.
Every template is compatible with all major mobile platforms and runs very smoothly on all browsers. You can edit every section of these templates to tailor them according to your specific needs.
Along with high quality website templates, Easy WebContent helps you add more colour to your sites by giving you the option to add high resolution images, HD videos, sound clips and eye-catching graphics.





10. Weebly


 Weebly
Use either your own domain name or a Weebly subdomain

Weebly is one of the pioneers in creating HTML5 based websites and templates. It's an entirely online website builder with lots of goodies for designers. Its designs are immaculate and its features and mind blowing. Every template and website design created using Weebly is compatible with mobile devices and works smoothly on all major platforms. You can create websites with Weebly using either your own domain name or a Weebly subdomain.





11. Moonfruit


 Moonfruit
Free website builder Moonfruit is a great choice for ecommerce sites

Whether you want to create a personal webpage, a corporate website or an ecommerce platform to start online selling, Moonfruit will create everything for you free of cost.
This online HTML5 website builder creates the highest quality of websites with minimum of effort. It also offers a detailed design editor that can be used to customize its website templates.
Since all its templates are responsive in nature, you don't need to create separate websites for mobile platforms.





12. Breezi


 Breezi
Breezi will find the template most suited to your needs

Website builder Breezi is designed to find you the template that's most relevant to your needs. You only need to identify your target industries and Breezi will list the templates for you. Each template is completely responsive in nature and opens perfectly on all mobile platforms. And just in case you need to make any changes to the pre-designed templates, you can use the Breezi site editor.






13. Cabanova


 Cabanova
Cabanova lets you create up to three pages for free

Cabanova is another HTML5 website builder that offers a diverse set of website design templates that are compatible with mobile platforms. As a free Cabanova user, you can create websites with up to three pages and 50 MB storage. You also get to choose from over 1000 high quality website templates and designs. These limits, however, can be increased by purchasing the premium version.





14. Sitecube


 Sitecube
Sitecube comes with a range of responsive templates

Sitecube, which claims to be the world's easiest HTML5 website builder, stands out because of its diverse range of high quality responsive website templates that can be used absolutely free of cost. Apart from creating HTML5 websites, Sitecube can also be used to design Flash websites, mobile websites and Facebook fan pages.
ContributionsJoseph O
Joseph O is an expert marketer and guest blogger who He handles marketing for HindSite, a top web design firm. This is an updated and extended version of an article that previously appeared on Creative Bloq. 
Like this? Read these: