Revision as of 22:07, 4 March 2017

This page describes the installation and configuration of a wordpress website. With the following plugins and settings you can do a 'classical' or 'blog' website or even a mix of both. It's up to you ! :)

Installation

Requirements

Enable PHP 7 support. (i) On OVH you can do that from the admin panel

Installation key points

Always use a database prefix (ex: baby_blog_ or it_tips_)
When asked you should create a STRONG password for the admin
If you see some warning during installation you've to adjust your .htaccess file

(i) This should not happen

Setup

Download the latest zip from [1] OR [2]
Put the archive on your server (using FTP)
Unzip the archive

You can use the following script: TODO GUILLAUME

Go to your website: the installation process will start

Permalinks (URL type)

Go to Settings > Permalinks
Select a friendly name for your articles: tick Post name

Plugins

All is done on the administrator interface: http://mysite.com/wp-admin

According to your needs, here is the list of plugins I recommend to install and activate:

Askimet : anti-spam
qTranslate-X : mutli-lang support
All in one WP Security : security
NextGEN Gallery : photos galleries
BackWPup : regular backup
TinyMCE Advanced : WYSIWIG editor
WP Statistics : statistics
Hide My Site : to restrict access to the website. All visitor must provide a common password that you gave them. (free version: only 1 password for all users)
Disable Google Fonts : to use only standard fonts instead of Google's fonts. This make the website faster to load.
Contact Form 7 : contact form easy to create and use
Simple Page Ordering : to set website pages order
Breadcrumb NavXT : breadcrumb (to know where your are in the website at all time and be able to go back)
WP Add Custom CSS : to add and manage custom CSS. This is particularly useful if you plan to use some custom / advanced features.

Askimet

Askimet blocks spams and avoids bots.

Installation:

Go to Plugins
Click on Activate under Askimet
Go to the Askimet website to register for free and get a key
Use your key

Configuration:

Go to Settings > Askimet
You adjust the Strictness (you should select 'always put spam in the Spam folder for review')

qTranslate-X

If you want to support many languages, then qTranslate is a must ! This will allow you to translate your posts and published them in different languages.

Installation:

Go to Plugins > Add new
Search for qTranslate-X
Install and activate the plugin

Configuration:

Go to Settings > Languages
Go to the Languages tab and select the list of languages you want to use (ex: French, English, Chinese). You must enable each language you want.
Then, go to the General tab
- Set the language order
- Set the URL modification order to Use Pre-Path Mode (Default, puts /en/ in front of URL). SEO friendly.
- Adjust Untranslated content settings
- Tick Show language names in "Camel Case"
- Tick Detect the language of the browser and redirect accordingly.
- Click Save changes

(i) You can adjust other settings if you'd like.

Add language selector to the website:

Go to Appearance > Widgets
Add qTranslate Language Chooser to the sidebar

Usage:

When you edit a POST or a PAGE you can choose the language

All in one WP Security

(i) Most of the following settings come from: https://wordpress.org/plugins/all-in-one-wp-security-and-firewall/

Security basis

Before installing the plugin you must set some basic security settings.

Go to Settings > Discussion
Default article settings
- To allow comments select: Allow people to post comments on new articles
Email
- If you want to receive email alerts on new comment select: Anyone posts a comment
Avatars
- Enable Show avatars
- Choose G — Suitable for all audiences
- Select a default avatar (ex: monsters)

Installation

Go to Plugins > Add new
Search for All in one WP Security
Install and activate the plugin

Configuration

You'll find below my configuration recommendations.

Go to WP security > Settings
- Go to tab WP Version Info
  - Tick Remove WP Generator Meta Info

Go to WP security > User accounts
- Go to tab WP Username
  - Adjust the super-user your username, you must avoid admin
- Display name - Ensure the logical name & display name are different
- Go to tab Display name
  - Everything should be OK. If not you must Edit your profile (by clicking on the image, top right corner) > Set Display name publicly as with something that is NOT the login

Go to WP security > User login
- Go to tab Login lockdown
  - Tick Enable Login Lockdown Feature
  - Set max login attempts = 5
  - Tick display generic error message
  - Tick Notify by email
- Go to tab Force logout
  - Tick Enable force WP user logout
  - Set the logout time to 120 mmn

Go to WP security > User registration
- Go to tab Manual approval
  - Tick enable manual approval of new registrations
- Go to tab Captcha
  - Tick Enable captcha on registration page

Go to WP security > Filesystem security
- Go to tab File permissions
  - Set all recommended permissions
- Go to tab PHP File editing
  - Tick disable ability to edit PHP files
- Go to tab WP file access
  - Tick prevent access to WP default install files

Go to WP security > Firewall
- Go to tab Basic firewall rules
  - Tick Enable Basic firewall protection
  - (optional, only if you don't publish articles using your phone) tick Block access to XML-RPC
  - Tick Block access to debug.log file
- Go to tab Additional firewall rules
  - Tick disable index views
  - Tick disable trace and track
  - Tick forbid proxy comment posting
  - Tick Deny bad query string
  - Tick Enable advanced character string filter
- Go to tab 6G blacklist firewall rules
  - Tick all options
- Go to tab Internet bots
  - Tick block fake googlebots
- Go to tab Prevent hotlinks
  - Tick prevent image hotlinking !!! This is particulary important if you want to restrict access to the website content !!! No one can display content outside your own domain.

Go to WP security > Brute force
- Go to tab Login captcha
  - Tick all options

Go to WP security > Spam prevention
- Go to tab Comment SPAM
  - Tick all options

Go to WP security > Miscellaneous
- Go to tab Copy protection
  - Enable Copy protection !!! This will prevent anyone from saving content and downloading it on their station !!! This is particulary important if you want to control the data and ensure the content does NOT get everywhere - in the case of private photos for instance.
- Go to tab Frames
  - Enable that feature
- Go to tab Users enumeration
  - Enable that feature

Complete! You're good to go! Just log-off / log-in again.

NextGEN Gallery

Source https://wordpress.org/plugins/nextgen-gallery/

Installation

Go to Plugins > Add new
Search for NextGEN Gallery
Install and activate the plugin

Upgrade to PRO version (NextGEN Plus)

(i) This is optional

If you want to add filigrane, prevent picture download and have better gallery I strongly recommend you to go for the PRO version NextGEN Plus.

It is a bit expensive - 49€ - but it really worth it in terms of security.

Once you've subscribed you'll receive the setup details by email.

Configuration

Go to Gallery > Other options
- Under Image options
  - Say YES to Delete image files when you remove a gallery
  - Say YES to Automatically resize images after upload !! This is particulary important for the website loading time !! ;)
  - Set the size to width: 1024 x height: 768 | Quality: 100% (i) you can adjust that to your own needs
  - Say YES to Backup original images?

- Under Thumbnail options
  - Set the default Thumbnail size to 240 x 160
  - Set fix dimension? YES

- Under Watermarks
  - How will generate a watermark? text
  - Choose the position (I recommend bottom right)
  - Offset 5 x 5
  - Text: © Daxiongmao.eu
  - Opacity: 100%
  - Font family: Arial
  - Font size: 10px
  - Color: white (you can choose something else)

~ for PRO version only ~

- Under Image protection
  - Say YES to Protect images !! This will disable the download option of the plugin
  - Say YES to Disable right click menu completly !! This will disable right click > save as... from the browser

BackWPup

To backup your blog / website regularly.

Requirement:

Create a backup folder on your FTP server (ex: /home/rddouanecw/www/backup/)

Installation

Go to Plugins > Add new
Search for BackWPup
Install and activate the plugin

Configuration

After installation:

Go to backWPup > jobs
Add new job

Go to General tab
- Save all (database, files, XML export, extensions, tables check)
- Name the archive (example): rd_douane_consulting_%Y-%m-%d
- Format: ZIP
- Job destination:
  - Save on File
  - Save on FTP
- Logs
  - Set email address to send log to
  - Set email from field like: Baby blog - backup <postmaster@qin-diaz.com>
  - Tick Errors only

Go to Schedule tab
- Use the Wordpress cron
- basic prog
- Once a week | month - depend on your own usage

Go to DB backup tab
- Select the tables to save
- Click GZIP compression

Go to Files tab
- Tick Backup WordPress install folder (ex: /home/daxiongm/www/baby)
  - Only select the blog | website folder from the root ; exclude all the rest
- Tick Backup content folder (ex: /home/daxiongm/www/baby/wp-content)
  - Exclude cache
  - Exclude upgrade
- Tick Backup plugins (ex: /home/daxiongm/www/baby/wp-content/plugins) !! this is particulary important if you paid some plugins !!
- Tick Backup themes (ex: /home/daxiongm/www/baby/wp-content/themes)
- Tick Backup uploads folder (ex: /home/daxiongm/www/baby/wp-content/uploads)
  - Exclude backwpup-*
- Tick include special files (Backup wp-config.php, robots.txt, nginx.conf, .htaccess, .htpasswd and favicon.ico from root if it is not included in backup.)
- Tick Use one folder above as WP install folder

Go to XML export tab
- Save all content
- click GZIP compression

Go to the Plugins tab
- Save all extensions
- click GZIP compression

Go to the DB: check tab
- Tick WordPress tables only

Go to the To: Folder tab
- Set the backup folder (ex: /home/rddouanecw/www/backup/)
- Set max 5 archives

Go to the FTP tab
- - (requirement) you must create a backup folder on the target FTP with read/write for the FTP user
  - set the FTP settings
  - set the target folder: /www/backup_daxiongmao/wedding/
  - Max 5 archives
  - Tick use FTP passive mode

All done! You can already backup your website | blog.

TinyMCE Advanced

This is an improved editor (What You See Is What You Get WYSIWYG).

Installation:

Go to Plugins > Add new
Search for TinyMCE Advanced
Install and activate the plugin

After installation:

Once installed, go to the Settings menu > TinyMCE Advanced
Select the buttons to use

(i) some hints:

Add copy & paste buttons
Add underline button
Add code button
Add 'emoticons' button
Add 'background color' button
Add 'page break' button
Tick Keep paragaph tags

WP Statistics

To have many statistics about your website.

Installation:

Go to Plugins > Add new
Search for WP Statistics
Install and activate the plugin

After installation:

Go to Statistics > settings
- Go to General tab
  - Disable all search engines but DuckDuckGo (it is the least popular)

Media from FTP

To upload media file by FTP and register them in your website.

Installation:

Go to Plugins > Add new
Search for Media from FTP
Install and activate the plugin

After installation:

Go to Media from FTP > settings
- Go to Click on Search & register button
- Select the files to add the library

Hide My Site

If you do NOT want your website to be accessible to the whole world: that's the plugin you need.

You must give the password to all your visitors (family, friends). You cannot access the website without that password!

This is very useful if you want to do a private blog with pictures for instance.

Installation

Go to Plugins > Add new
Search for Hide My Site
Install and activate the plugin

Configuration

Go to Settings > Hide my site
- Tick Enable password protection
- Set your password << This is the password you need to send to all your visitors
- You can provide some password hint, as long as it is not dummy and only the persons that know you can find it!
- Tick brute force detection

How to test it?

Just log-off from the administrator interface and go to your website. The password pop-up should appear.

Mobile phones

This works on mobile phones (Android, iPhone, Windows phone). However you must ZOOM to see the input text field. This is a bug in the plugin, a small price to pay for better privacy. ^-^

Disable Google Fonts

In China Google is not fast, not fast at all!! You must disable the Google fonts to improve users' experience ; otherwise the website may take minutes to load.

Installation:

Go to Plugins > Add new
Search for Disable Google Fonts
Install and activate the plugin

Contact Form 7

Source: https://wordpress.org/plugins/contact-form-7/

Installation

Go to Plugins > Add new
Search for Contact Form 7
Install and activate the plugin

Configuration

Go to Contact > Contact forms
- Click on Add new or edit the default one

Go to Form tab. Adjust the form, you can use the following example:

<label>Nom, prénom | Name | 名字 (required)
    [text* your-name] </label>

<label>Email | 电邮 (required)
    [email* your-email] </label>

<label>Sujet | Subject | 标题
    [text* your-subject] </label>

<label>Message | 信息
    [textarea* your-message] </label>

[submit "Envoyer | Send | 发送"]

Go to Mail tab
- Tick Use HTML content type

Usage

Create a new page | post with the following content: [contact-form-7 id="11" title="Xiongmaos"]

(i) The exact content line appears when you create the form on your own website

Simple Page Ordering

Use that plugin to create a website. this will set a fix order of the posts.

Installation:

Go to Plugins > Add new
Search for Simple Page Ordering
Install and activate the plugin

Usage:

Go to Pages
Just drag and drop the page in the order you'd like them to appear. The top page will be the 1st on the left in the menu bar, right after "home".

Mistape

This plugin allow users / visitors to report some text error (grammar, orthography, typography, etc.) to the web-site editors or administrators.

Installation:

Go to Plugins > Add new
Search for mistape
Install and activate the plugin

Configuration:

Go to Settings > Mistape
Enable the plugin on posts and pages

Breadcrumb NavXT

Installation:

Go to Plugins > Add new
Search for Breadcrumb NavXT
Install and activate the plugin

WP Add Custom CSS

This will allow you to add particular CSS class for the whole site | some categories | a particular post or page. If you want to do advanced things, that's the plug-in you need. It will save you from using FTP and upgrading manually the CSS files :)

Installation

Go to Plugins > Add new
Search for WP Add Custom CSS
Install and activate the plugin

More details on: https://wordpress.org/plugins/wp-add-custom-css/faq/

Usage (particular post | article)

Go to the POST or PAGE
Scroll page down: below the editor, tags, discussion, slug, etc.
You should find a "Custom CSS" box.
Put your CSS inside and save POST | PAGE
You're good to go!

The main advantage of that plug-in is that you can allow know what CSS is available on which post | page and edit it on-line.

Themes

There are thousands of themes for Wordpress!

You'll find below the themes I like and use:

For the wedding website: Snowberry
For the baby blog: Synapse

(i) For the Synapse theme I recommend you to use some 'feature image' on each post, with a 256px size.

Advanced things

Sometimes the default wordpress features aren't enough. You might want to do something a bit more advanced / custom, such as a child height chart for instance or a wedding tree.

To do so you'll need to write you own HTML code and CSS classes.

To load the CSS into wordpress: use WP Add Custom CSS plug-in
To load the HTML manually into a post | article, just edit the source (using Advanced TinyMCE) and your own code.

Height chart

You'll find below the code (HTML + CSS) and resources I used for my Child height chart + how to update it

Setup

Upload the picture as a media
- Go to Media > add new
- Upload the image (Click on the picture to get it in full size)

Create | edit a new post or page
- Click on Add Media (top left of the editor window)
- Don't forget to set the media properties

Edit the page's source code
- Replace IMG tag code.

BEFORE (wordpress default media):

<p>
	<img class="alignnone size-full wp-image-359" 
		 src="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/height_charts_01.png" 
		 alt="Height charts" 
		 width="875" 
		 height="1700">
</p>

AFTER (adjust the URL, and FIGCAPTION to your own needs):

<p>
	<figure class="height-chart">
		<img class="alignnone size-full wp-image-359" 
			 src="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/height_charts_01.png" 
		 	 alt="Height charts" 
		 	 width="875" 
		 	 height="1700" />
		<figcaption class="height-chart-text age0">---------------------------------------------------------- > Birth - 51 cm</figcaption>
		<!--
		<figcaption class="height-chart-text age0-1">---------------------------------------------------------- > 1 month - 55 cm</figcaption>
		<figcaption class="height-chart-text age0-3">---------------------------------------------------------- > 3 months - 57 cm</figcaption>
		<figcaption class="height-chart-text age0-6">---------------------------------------------------------- > 6 months - 60 cm</figcaption>
		<figcaption class="height-chart-text age1">---------------------------------------------------------------------- > 1 year - 80 cm</figcaption>
		-->

		<figcaption class="height-chart-text mom">----- > Xiongmette (Mom) - 165cm</figcaption>
		<figcaption class="height-chart-text dad">----- > Xiongmao (Dad) - 185cm</figcaption>
	</figure>
</p>

Key points:

Put the IMG tag inside a FIGURE
Add as many FIGCAPTION as you need. Each figcaption will be displayed on the image.
Create 1 dedicated CSS class per figcaption
Add these CSS classes inside your Custom CSS

(i) Don't forget to close the IMG tag (wordpress doesn't do so by default :S)

Add CSS classes to the post or page
- In the Custom CSS block (at the bottom of the page), add:

.height-chart {
	position: relative;
	padding: 0;
	margin: 0;
}
.height-chart img {
	display: block;
	max-width: 100%;
	height: auto;
}
.height-chart:after {
	content: "";
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/* background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 100%) repeat 0 0; */
	z-index: 1;
}
.height-chart-text {
	display: block;
	position: absolute;
	width: 100%;
	color: #0A122A;
	padding: 1em;
	font-weight: 400;
	z-index: 2;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
/** 
  To set the age mark:
    - Always set left:430px;
    - Adjust the height, from 300px. ~9px = 1 cm [with 94px == 10cm]
    - Create 1 class per age you'd like to set, then set that class in the HTML code. ex:
        This is my height chart:
			
				
				--------------------------------- > Birth - 51 cm
				--------------------------------------------- > 1 month - 55 cm
				--------------------------------------------- > 3 months - 57 cm
				---------------------------------- > 6 months - 60 cm
				---------------------------------------------------------------------- > 1 year - 80 cm


				----- > Xiongmette (Mom) - 165cm
				----- > Xiongmao (Dad) - 185cm
			
		
*/
.age0 {
	left: 430px;
	bottom: 311px;
}
.age0-1 {
	left: 430px;
	bottom: 350px;
}
.age0-3 {
	left: 430px;
	bottom: 370px;
}
.age0-6 {
	left: 430px;
	bottom: 400px;
}
.age1 {
	left: 430px;
	bottom: 590px;
}
.mom {
	color:#DF0174;
	left: 430px;
	bottom: 1399px;
}
.dad {
	color:#013ADF;
	left: 430px;
	bottom: 1590px;
}

!!! You will not see the CSS effect in the admin panel. You must save the post or page and visit your website to see the results !!!

Update

To update the graphic:

Edit the post or page source code
- Add a new FIGCAPTION for every event with a particular CSS class

Add a new CSS class
- Adjust the left and bottom values. To set the age mark:
  - Always set left:430px;
  - Adjust the height, starting from 300px (50cm). ~9px = 1 cm [with 94px == 10cm]

@@ Line 548: / Line 548: @@
 * Go to '''Pages'''
 * Just drag and drop the page in the order you'd like them to appear. The top page will be the 1st on the left in the menu bar, right after "home".
+==Mistape==
+This plugin allow users / visitors to report some text error (grammar, orthography, typography, etc.) to the web-site editors or administrators.
+Installation:
+* Go to '''Plugins''' > '''Add new'''
+* Search for '''mistape'''
+* Install and activate the plugin
+Configuration:
+* Go to '''Settings''' > '''Mistape'''
+* Enable the plugin on ''posts'' and ''pages''
 ==Breadcrumb NavXT==

Anonymous

Search

Navigation

Wiki tools

Page tools

Categories

Difference between revisions of "Wordpress"

Revision as of 22:07, 4 March 2017

Contents

Installation

Permalinks (URL type)

Plugins

Askimet

qTranslate-X

All in one WP Security

Security basis

Installation

Configuration

NextGEN Gallery

Installation

Upgrade to PRO version (NextGEN Plus)

Configuration

BackWPup

Installation

Configuration

TinyMCE Advanced

WP Statistics

Media from FTP

Hide My Site

Installation

Configuration

How to test it?

Mobile phones

Disable Google Fonts

Contact Form 7

Installation

Configuration

Usage

Simple Page Ordering

Mistape

Breadcrumb NavXT

WP Add Custom CSS

Installation

Usage (particular post | article)

Themes

Advanced things

Height chart

Setup

Update