Difference between revisions of "Wordpress"
(→‎Themes)
 
(26 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
[[Category:Website]]
 
[[Category:Website]]
 +
 +
 +
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=
 
=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:  <code>baby_blog_</code>  or  <code>it_tips_</code>)
 +
* When asked you should create a STRONG password for the admin
 +
* If you see some warning during installation you've to adjust your <code>.htaccess</code> file
 +
(i) This should not happen
 +
 +
 +
'''Setup'''
 
# Download the latest zip from [http://wordpress.org] OR  [http://fr.wordpress.org]
 
# Download the latest zip from [http://wordpress.org] OR  [http://fr.wordpress.org]
 
# Put the archive on your server (using FTP)
 
# Put the archive on your server (using FTP)
−
# Adjust and copy the PHP script to unzip the archive
+
# 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'''''
  
−
# Go to your website and run the PHP script
 
  
  
 
=Plugins=
 
=Plugins=
 +
 +
 
All is done on the administrator interface: http://mysite.com/wp-admin
 
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.
  
  
Line 17: Line 63:
  
 
Askimet blocks spams and avoids bots.
 
Askimet blocks spams and avoids bots.
 +
 +
 +
Installation:
 
* Go to '''Plugins'''
 
* Go to '''Plugins'''
 
* Click on '''Activate''' under ''Askimet''
 
* Click on '''Activate''' under ''Askimet''
 
* Go to the Askimet website to register for free and get a key
 
* Go to the Askimet website to register for free and get a key
 
* Use your 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'''
 +
*** <ins>Tick ''prevent image hotlinking''</ins>  !!! 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'''
 +
*** <ins>''Enable Copy protection''</ins>  !!! 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) <ins>This is optional</ins>
 +
 +
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
 +
*** <ins>Say YES to ''Automatically resize images after upload''</ins>  !! This is particulary important for the website loading time !! ;)
 +
*** Set the size to <ins>width: 1024 x height: 768 | Quality: 100%</ins>  (i) you can adjust that to your own needs
 +
*** <ins>Say YES to ''Backup original images?''</ins>
 +
 +
** 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'''
 +
*** <ins>Say YES to ''Protect images''</ins>  !! This will disable the download option of the plugin
 +
*** <ins>Say YES to ''Disable right click menu completly''</ins> !! This will disable right click > save as... from the browser
 +
  
  
Line 32: Line 291:
  
  
−
Installation:
+
===Installation===
 
* Go to '''Plugins''' > '''Add new'''
 
* Go to '''Plugins''' > '''Add new'''
 
* Search for ''BackWPup''  
 
* Search for ''BackWPup''  
 
* Install and activate the plugin
 
* Install and activate the plugin
  
 +
 +
===Configuration===
  
 
After installation:  
 
After installation:  
−
* Once installed, go to the '''backWPup''' menu > '''operations'''
+
* Go to '''backWPup''' > '''jobs'''
−
* Create a new operation
+
* ''Add new'' job
−
** '''General''' tab
+
 
−
*** Save all (database, files, XML export, extensions, tables check)
+
 
−
*** Name the archive (example): rd_douane_consulting_%Y-%m-%d
+
* Go to '''General''' tab
−
*** Format: ZIP
+
** <ins>Save all</ins> (database, files, XML export, extensions, tables check)
−
*** Save on File, Save on FTP
+
** Name the archive (example): <code>rd_douane_consulting_</code><ins>%Y-%m-%d</ins>
−
*** Send logs by email
+
** Format: <ins>ZIP</ins>
−
** '''Schedule''' tab
+
** Job destination:
−
*** Use the Wordpress cron
+
*** Save on File
−
*** basic prog
+
*** Save on FTP
−
*** Once a month
+
** Logs
−
** '''Database''' tab
+
*** Set email address to send log to
−
*** Select the tables to save
+
*** Set email from field like: <code>Baby blog - backup <postmaster@qin-diaz.com></code>
−
*** Click GZIP compression
+
*** Tick ''Errors only''
−
** '''Files''' tab
+
 
−
*** Select files to save - exclude the backup folder
+
 
−
*** click GZIP compression
+
* Go to '''Schedule''' tab
−
** '''XML export''' tab
+
** Use the <ins>Wordpress cron</ins>
−
*** Save all content
+
** <ins>basic</ins> prog
−
*** click GZIP compression
+
** Once a week | month - depend on your own usage
−
** '''Extension''' tab
+
 
−
*** Save all extensions
+
 
−
*** click GZIP compression
+
* Go to '''DB backup''' tab
−
** '''Folder''' tab
+
** Select the tables to save
−
*** Set the backup folder (ex: /home/rddouanecw/www/backup/)
+
** Click <ins>GZIP</ins> compression
−
*** Max 5 archives
+
 
−
** '''FTP''' tab
+
 
 +
* Go to '''Files''' tab
 +
** Tick ''Backup WordPress <ins>install</ins> folder''  (ex: <code>/home/daxiongm/www/baby</code>)
 +
*** Only select the blog | website folder from the root ; exclude all the rest
 +
** Tick ''Backup <ins>content</ins> folder''  (ex: <code>/home/daxiongm/www/baby/wp-content</code>)
 +
*** Exclude '''cache'''
 +
*** Exclude ''upgrade''
 +
** Tick ''Backup <ins>plugins</ins>''  (ex: <code>/home/daxiongm/www/baby/wp-content/plugins</code>)  !! this is particulary important if you paid some plugins !!
 +
** Tick ''Backup <ins>themes</ins>''  (ex: <code>/home/daxiongm/www/baby/wp-content/themes</code>)
 +
** Tick ''Backup <ins>uploads</ins> folder''  (ex: <code>/home/daxiongm/www/baby/wp-content/uploads</code>)
 +
*** 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: <code>/home/rddouanecw/www/backup/</code>)
 +
** 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  
 
*** (requirement) you must create a backup folder on the target FTP with read/write for the FTP user  
 
*** set the FTP settings
 
*** set the FTP settings
 
*** set the target folder: <code>/www/backup_daxiongmao/wedding/</code>
 
*** set the target folder: <code>/www/backup_daxiongmao/wedding/</code>
 
*** Max 5 archives
 
*** 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
 +
* <ins>Tick ''Keep paragaph tags''</ins>
  
  
Line 85: Line 411:
  
 
After installation:  
 
After installation:  
−
* Once installed, go to the '''Statistics''' menu > '''settings'''
+
* Go to '''Statistics''' > '''settings'''
−
* Adjust to your own needs
+
** Go to '''General''' tab
−
(i) I usually don't change anything...
+
*** Disable all search engines but DuckDuckGo (it is the least popular)
 +
 
 +
 
 +
 
 +
==Disable REST API==
 +
 
 +
To upload media file by FTP and register them in your website.
 +
 
 +
 
 +
Installation:
 +
* Go to '''Plugins''' > '''Add new'''
 +
* Search for ''Disable REST api''
 +
* Install and activate the plugin
 +
 
 +
 
 +
After installation:
 +
* Go to '''Plugins''' > '''settings'''
 +
** Select the things to unable. Default: everything is blocked (recommended)
 +
 
 +
 
 +
 
 +
==Media from FTP==
 +
 
 +
To upload media file by FTP and register them in your website.
  
  
−
==TinyMCE Advanced==
+
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
 +
 
 +
 
 +
 
 +
==Theme My Login==
 +
 
 +
This plugin will display a nice and user friendly login page that you can give to your users. https://wordpress.org/plugins/theme-my-login/
  
−
This is an improved editor (What You See Is What You Get WYSIWYG).
+
Complete tutorial: http://www.wpbeginner.com/plugins/how-to-add-front-end-login-page-and-widgets-in-wordpress/
  
  
 
Installation:  
 
Installation:  
 
* Go to '''Plugins''' > '''Add new'''
 
* Go to '''Plugins''' > '''Add new'''
−
* Search for '''TinyMCE Advanced'''  
+
* Search for ''Theme my login''  
 
* Install and activate the plugin
 
* Install and activate the plugin
  
  
 
After installation:  
 
After installation:  
−
* Once installed, go to the '''Settings''' menu > '''TinyMCE'''
+
* Go to '''TML'''
−
* Select the buttons to use
+
* Enable:
 +
** Enable Custom E-mail
 +
** Enable Custom Passwords
 +
** Enable Custom Redirection
 +
** Enable security
 +
 
 +
 
 +
===Redirection settings===
 +
 
 +
Set '''Referer''' to all
 +
 
 +
 
 +
===Security===
 +
 
 +
You can let the default options.
 +
 
 +
 
 +
 
 +
===Email settings===
 +
 
 +
====New user====
 +
 
 +
<syntaxhighlight lang="html5">
 +
<p>
 +
  <a href="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02.png">
 +
    <img class="wp-image-124 alignleft"
 +
        src="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02-150x150.png"
 +
        alt="minixiongmao"
 +
        width="64" height="64">
 +
  </a>
 +
  <strong>
 +
  <span style="font-size: 18pt;">MiniXiongMao</span><br>
 +
  </strong>
 +
  <span style="color: #808080;"><em>chaque jour est une merveille</em></span> | <span style="color: #808080;"><em>Every day is a wonder</em></span>
 +
</p>
 +
 
 +
 
 +
<h2>Bienvenue,</h2>
 +
<p>Votre inscription au blog <a href="http://daxiongmao.eu/baby">MiniXiongMao</a> est complète ! N'hésitez pas à réagir aux articles et photos. :-)<br></p>
 +
<ul>
 +
<li>Votre nom d'utilisateur: %user_login%</li>
 +
<li>Votre email: %user_email%</li>
 +
</ul>
 +
 
 +
<p>Bonne lecture!</p>
 +
<p>/Guillaume, Sisi &amp; Alexis</p>
 +
<p>&nbsp;</p>
 +
<p>🔒 <span style="font-size: 10pt;"> mot de passe, si demandé: "minixiongmao" (sans les guillemets)</span></p>
 +
 
 +
<hr/>
 +
 
 +
<h2>Welcome,</h2>
 +
<p>You are registered on <a href="http://daxiongmao.eu/baby">MiniXiongMao</a>! Don't hesitate to comment the articles and pictures. :-)<br></p>
 +
<ul>
 +
<li>Your username: %user_login%</li>
 +
<li>Your email: %user_email%</li>
 +
</ul>
 +
 
 +
<p>Happy reading!</p>
 +
<p>/Guillaume, Sisi &amp; Alexis</p>
 +
<p>&nbsp;</p>
 +
<p>🔒 <span style="font-size: 10pt;"> password, if asked: "minixiongmao" (without quotes)</span></p>
 +
 
 +
</syntaxhighlight>
 +
 
 +
 
 +
====New user admin notification====
 +
 
 +
<syntaxhighlight lang="html5">
 +
<p>
 +
  <a href="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02.png">
 +
    <img class="wp-image-124 alignleft"
 +
        src="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02-150x150.png"
 +
        alt="minixiongmao"
 +
        width="64" height="64">
 +
  </a>
 +
  <strong>
 +
  <span style="font-size: 18pt;">MiniXiongMao</span><br>
 +
  </strong>
 +
  <span style="color: #808080;"><em>chaque jour est une merveille</em></span> | <span style="color: #808080;"><em>Every day is a wonder</em></span>
 +
</p>
 +
 
 +
 
 +
<h2>Nouvel utilisateur</h2>
 +
<p>Un nouvel utilisateur vient de s'inscrire sur <a href="http://daxiongmao.eu/baby">MiniXiongMao</a><br></p>
 +
<ul>
 +
<li>Utilisateur: %user_login%</li>
 +
<li>Email: %user_email%</li>
 +
</ul>
 +
 
 +
<p>/MiniXiongMao webmaster</p>
 +
 
 +
 
 +
<hr/>
 +
 
 +
 
 +
<h2>New user</h2>
 +
<p>A new user has been register on <a href="http://daxiongmao.eu/baby">MiniXiongMao</a><br></p>
 +
<ul>
 +
<li>username: %user_login%</li>
 +
<li>email: %user_email%</li>
 +
</ul>
 +
<p>/MiniXiongMao webmaster</p>
 +
 
 +
</syntaxhighlight>
 +
 
 +
 
 +
====Reset ====
 +
 
 +
<syntaxhighlight lang="html5">
 +
<p>
 +
  <a href="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02.png">
 +
    <img class="wp-image-124 alignleft"
 +
        src="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02-150x150.png"
 +
        alt="minixiongmao"
 +
        width="64" height="64">
 +
  </a>
 +
  <strong>
 +
  <span style="font-size: 18pt;">MiniXiongMao</span><br>
 +
  </strong>
 +
  <span style="color: #808080;"><em>chaque jour est une merveille</em></span> | <span style="color: #808080;"><em>Every day is a wonder</em></span>
 +
</p>
 +
 
 +
 
 +
<h2>Récupération du mot de passe</h2>
 +
<p>Cliquez sur le lien suivant afin de récupérer votre mot de passe: %reseturl%<br><br></p>
 +
<p>/Guillaume, Sisi & Alexis</p>
 +
<p> </p>
 +
<p>🔒 <span style="font-size: 10pt;"> mot de passe, si demandé: "minixiongmao" (sans les guillemets)</span></p>
 +
 
 +
 
 +
<hr/>
 +
 
 +
 
 +
<h2>Password restore</h2>
 +
<p>Please click on the following link to retrieve your MiniXiongMao password: %reseturl%<br></p>
 +
<p>/Guillaume, Sisi & Alexis</p>
 +
<p> </p>
 +
<p>🔒 <span style="font-size: 10pt;"> password, if asked: "minixiongmao" (without quotes)</span></p>
 +
 
 +
</syntaxhighlight>
 +
 
 +
==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). <ins>You cannot access the website without that password!</ins>
 +
 
 +
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'''
 +
** <ins>Tick ''Enable password protection''</ins>
 +
** 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:
 +
 
 +
<syntaxhighlight lang="xml">
 +
<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 | 发送"]
 +
</syntaxhighlight>
 +
 
 +
 
 +
* Go to '''Mail''' tab
 +
** Tick ''Use HTML content type''
 +
 
 +
 
 +
===Usage===
 +
 
 +
 
 +
Create a new page | post with the following content: <code>[contact-form-7 id="11" title="Xiongmaos"]</code>
 +
 
 +
 
 +
(i) The exact content line appears when you create the form on your own website
 +
 
  
−
(i) some hints:
 
−
* Add ''copy'' & ''paste'' buttons
 
−
* Add ''underline'' button
 
−
* Add ''code'' button
 
−
* Add 'emoticons' button
 
−
* Add 'background color' button
 
−
* Add 'page break' button
 
  
  
Line 123: Line 716:
 
* Search for '''Simple Page Ordering'''  
 
* Search for '''Simple Page Ordering'''  
 
* Install and activate the plugin
 
* 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
 +
 +
 +
 +
 +
==Better notifications==
 +
 +
To alert users when new posts are being published. By default no notifications are send, to avoid SPAM.
 +
 +
 +
Installation:
 +
* Go to '''Plugins''' > '''Add new'''
 +
* Search for '''Better notification'''
 +
* Install and activate the plugin
 +
 +
 +
Configuration
 +
* A new menu on the left will appear: '''Notifications'''
 +
* Go to '''notifications''' > '''All notifications''' > '''Add new'''
 +
* Create a notification for '''new post published'''
 +
* Fill up the form !
 +
 +
 +
(i) You can test the new notification thanks to the test button on the upper right corner
 +
 +
 +
 +
==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 a blog: '''Synapse'''
 +
* For a single-page website with a lot of EASY FEATURES: '''Hestia'''
 +
 +
 +
 +
(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===
 +
 +
* <ins>Upload the picture as a media</ins>
 +
** Go to '''Media''' > '''add new'''
 +
** Upload the image (Click on the picture to get it in full size)
 +
 +
[[File:Height charts.png|200px|Height chart]]
 +
 +
 +
 +
 +
 +
* 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):
 +
<syntaxhighlight lang="html5">
 +
<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>
 +
</syntaxhighlight>
 +
 +
 +
AFTER (adjust the URL, and FIGCAPTION to your own needs):
 +
 +
<syntaxhighlight lang="html5">
 +
<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>
 +
</syntaxhighlight>
 +
 +
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 <ins>1 dedicated CSS class per ''figcaption''</ins>
 +
* 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:
 +
 +
<syntaxhighlight lang="css">
 +
.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;
 +
}
 +
</syntaxhighlight>
 +
 +
 +
 +
 +
!!! <ins>You will not see the CSS effect in the admin panel</ins>. 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 <code>left:430px;</code>
 +
*** Adjust the height, starting from 300px (50cm). ~9px = 1 cm [with 94px == 10cm]

Latest revision as of 06:49, 19 April 2018


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

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

You can use the following script: TODO GUILLAUME

  1. 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)


Disable REST API

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


Installation:

  • Go to Plugins > Add new
  • Search for Disable REST api
  • Install and activate the plugin


After installation:

  • Go to Plugins > settings
    • Select the things to unable. Default: everything is blocked (recommended)


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


Theme My Login

This plugin will display a nice and user friendly login page that you can give to your users. https://wordpress.org/plugins/theme-my-login/

Complete tutorial: http://www.wpbeginner.com/plugins/how-to-add-front-end-login-page-and-widgets-in-wordpress/


Installation:

  • Go to Plugins > Add new
  • Search for Theme my login
  • Install and activate the plugin


After installation:

  • Go to TML
  • Enable:
    • Enable Custom E-mail
    • Enable Custom Passwords
    • Enable Custom Redirection
    • Enable security


Redirection settings

Set Referer to all


Security

You can let the default options.


Email settings

New user

<p>
  <a href="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02.png">
    <img class="wp-image-124 alignleft" 
         src="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02-150x150.png" 
         alt="minixiongmao" 
         width="64" height="64">
  </a>
  <strong>
  	<span style="font-size: 18pt;">MiniXiongMao</span><br>
  </strong>
  <span style="color: #808080;"><em>chaque jour est une merveille</em></span> | <span style="color: #808080;"><em>Every day is a wonder</em></span>
</p>


<h2>Bienvenue,</h2>
<p>Votre inscription au blog <a href="http://daxiongmao.eu/baby">MiniXiongMao</a> est complète ! N'hésitez pas à réagir aux articles et photos. :-)<br></p>
<ul>
<li>Votre nom d'utilisateur: %user_login%</li>
<li>Votre email: %user_email%</li>
</ul>

<p>Bonne lecture!</p>
<p>/Guillaume, Sisi &amp; Alexis</p>
<p>&nbsp;</p>
<p>🔒 <span style="font-size: 10pt;"> mot de passe, si demandé: "minixiongmao" (sans les guillemets)</span></p>

<hr/>

<h2>Welcome,</h2>
<p>You are registered on <a href="http://daxiongmao.eu/baby">MiniXiongMao</a>! Don't hesitate to comment the articles and pictures. :-)<br></p>
<ul>
<li>Your username: %user_login%</li>
<li>Your email: %user_email%</li>
</ul>

<p>Happy reading!</p>
<p>/Guillaume, Sisi &amp; Alexis</p>
<p>&nbsp;</p>
<p>🔒 <span style="font-size: 10pt;"> password, if asked: "minixiongmao" (without quotes)</span></p>


New user admin notification

<p>
  <a href="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02.png">
    <img class="wp-image-124 alignleft" 
         src="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02-150x150.png" 
         alt="minixiongmao" 
         width="64" height="64">
  </a>
  <strong>
  	<span style="font-size: 18pt;">MiniXiongMao</span><br>
  </strong>
  <span style="color: #808080;"><em>chaque jour est une merveille</em></span> | <span style="color: #808080;"><em>Every day is a wonder</em></span>
</p>


<h2>Nouvel utilisateur</h2>
<p>Un nouvel utilisateur vient de s'inscrire sur <a href="http://daxiongmao.eu/baby">MiniXiongMao</a><br></p>
<ul>
<li>Utilisateur: %user_login%</li>
<li>Email: %user_email%</li>
</ul>

<p>/MiniXiongMao webmaster</p>


<hr/>


<h2>New user</h2>
<p>A new user has been register on <a href="http://daxiongmao.eu/baby">MiniXiongMao</a><br></p>
<ul>
<li>username: %user_login%</li>
<li>email: %user_email%</li>
</ul>
<p>/MiniXiongMao webmaster</p>


Reset

<p>
  <a href="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02.png">
    <img class="wp-image-124 alignleft" 
         src="http://www.daxiongmao.eu/baby/wp-content/uploads/2016/12/baby_logo_02-150x150.png" 
         alt="minixiongmao" 
         width="64" height="64">
  </a>
  <strong>
  	<span style="font-size: 18pt;">MiniXiongMao</span><br>
  </strong>
  <span style="color: #808080;"><em>chaque jour est une merveille</em></span> | <span style="color: #808080;"><em>Every day is a wonder</em></span>
</p>


<h2>Récupération du mot de passe</h2>
<p>Cliquez sur le lien suivant afin de récupérer votre mot de passe: %reseturl%<br><br></p>
<p>/Guillaume, Sisi & Alexis</p>
<p> </p>
<p>🔒 <span style="font-size: 10pt;"> mot de passe, si demandé: "minixiongmao" (sans les guillemets)</span></p>


<hr/>


<h2>Password restore</h2>
<p>Please click on the following link to retrieve your MiniXiongMao password: %reseturl%<br></p>
<p>/Guillaume, Sisi & Alexis</p>
<p> </p>
<p>🔒 <span style="font-size: 10pt;"> password, if asked: "minixiongmao" (without quotes)</span></p>

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



Better notifications

To alert users when new posts are being published. By default no notifications are send, to avoid SPAM.


Installation:

  • Go to Plugins > Add new
  • Search for Better notification
  • Install and activate the plugin


Configuration

  • A new menu on the left will appear: Notifications
  • Go to notifications > All notifications > Add new
  • Create a notification for new post published
  • Fill up the form !


(i) You can test the new notification thanks to the test button on the upper right corner


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 a blog: Synapse
  • For a single-page website with a lot of EASY FEATURES: Hestia


(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)

Height chart



  • 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]
Retrieved from "http://www.daxiongmao.eu/wiki/index.php?title=Wordpress&oldid=2864"