Category: WordPress

How To Backup WordPress


2020-04-25 WordPress

GOAL

To backup the content of WordPress.

Environment

WordPress 5.5.1

Method

Method 1. Download data from the server directly

Access the server where “wp” directory exits.

Open “wp” directories and download “wp-content” directory that contains all uploaded files such as images and videos, plugins and themes installed. wp-includes and wp-admin can be recovered from WordPress.org.

“wp-content” doesn’t contain text and information of the articles. It is saved in the SQL database. You can download it by clicking Tools>Export in Dashboard.

Then select “All content” and click “Download Export file” button.

Method 2. Use Plugins

There are some plugins for backup.

All-in-One WP Migration
UpdraftPlus WordPress Backup Plugin
BackWPup – WordPress Backup Plugin
WordPress Backup and Migrate Plugin – Backup Guard
Duplicator – WordPress Migration Plugin

I use All-in-One WP Migration because it is easy to use and has some useful functions in addition to backup.

The way for backup is to click backup button and just download created file.

How To Set WordPress URL and Site URL Separately


2020-03-18 WordPress

GOAL

Today’s goal is to set site address and WordPress address different. For example, the WordPress address is “example.com/admin” if the site address is “example.com”.

Environment

WordPress 5.4.1

What are WordPress address and site address?

On the Settings -> General screen in a single site installation of WordPress, there are two fields named “WordPress Address (URL)” and “Site Address (URL)”.

from Changing The Site URL in wordpress.org

The “Site Address (URL)” setting is the address you want people to type in their browser to reach your WordPress blog.
The “WordPress Address (URL)” setting is the address where your WordPress core files reside.

from Changing The Site URL in wordpress.org
(more…)

Let’s Migrate WordPress Into The New Sever or New Domain.


2020-03-16 WordPress

GOAL

To migrate my WordPress Website into the new domain , in other words, to change the URL into the new one.

Environment

WordPress 5.4.1

Method

I chose a method with an useful plugin.

1. Get a new domain and set the name server.

I set a directory created on my web server to the new domain.

2. Install new WordPress on the target directory

3. Export file

Install plugin “All-in-One WP Migration” into the WordPress in before.com.

Open “Export” menu and export files by pressing “FILE” button and download created .wpress file.

.wpress file contains database, Posts, Pages, Images, Themes, Plugins, User settings and so on.

4. Import site

Open “new” WordPress and install plugin “All-in-One WP Migration” into the WordPress in new.com.

Open “Import” menu and click “IMPORT FROM” to import .wpress file.

If you got message “Your file exceeds the maximum upload size for this site”

You should increase the maximum upload size. Click “How-to: Increase maximum upload file size”.

There are some ways to increase maximum upload file size. You can use a plugin if the .wpress file size is less than 512MB. Install Basic or Premium All-in-One WP Migration Import. I used Basic one.

Open “Plugins” menu and click “Add New” button.

Upload Plugin and upload the plugin zip file “all-in-one-wp-migration-file-extension.zip”.

Then you can upload data up to 512 MB.

5. Check

You can see the items, images, themes and so on after uploading site.

How To Embed CodePen in Your Website.


2020-03-07 JavaScript Web WordPress

I tried CodePen belatedly.

GOAL

To embed CodePen viewer in my WordPress web site as below.

What is CodePen?

CodePen is a web service to build, test, share and discover front-end code such as html, css and JavaScript.

CodePen is a social development environment for front-end designers and developers. 

from CodePen

Start Coding

In my case, I’ve signed up at first, but you can just start coding by clicking “Start Coding” button.

Embed CodePen

Click “Embed” button at the lower bottom of the page after coding.

Select the style of editor and change the size of the window. you can use anything you like. I chose “HTML (recommended)” and copy the code.

Paste the copied code in the Custom HTML block as below.

See the Pen watching by HanakoSonobe (@s-nako) on CodePen.

How To Post Formula on Your WordPress Website


2020-02-12 Tips WordPress

GOAL

To add formula on your WordPress posts as below.

$$\frac{A}{B}$$

Method

Install MathJax-LaTeX Plugin

“MathJax-LaTeX” is the plugin for rendering of embedded LaTeX or MathML in HTML pages. It convert LaTeX style code ” \int^{ \infty}_{a} f(x) dx = \lim_{n \to \infty} \int^{n}_{a} f(x) dx” into the formula as below.
$$\int^{ \infty}_{a} f(x) dx = \lim_{n \to \infty} \int^{n}_{a} f(x) dx$$

Input shortcode

Input shortcode “mathjax” on your post. (Input mathjax with [ and ])

Input formula

Input LaTex style code of the formula enclosed in $$s.

Trouble shooting

If the shortcode “mathjax” doesn’t work well, open “Plugins” panel and click the setting of “MathJax-LaTeX” on your Dashboard. Check the “Force Load”.

How to embed tweet button in WordPress article


2020-02-10 Tips Web WordPress

GOAL

To embed Tweet button in each WordPress articles.

Environment

WordPress 5.2.5

Method

1. Get the source code of Tweet button.

Get the source code of tweet button from https://publish.twitter.com/#

Select “Twitter Buttons”.

from https://publish.twitter.com/

Customize the style of tweet button and copy the code displayed.

from https://publish.twitter.com/

2. Embed the source code.

Click the Theme Editor on your WordPress Dashboard. And open content.php.

Put the code copied from https://publish.twitter.com/ on any place you want.

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-via="nako_new_high" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Then change the code to get the target source URL and the title.

<a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php echo get_the_title(); ?>" class="twitter-share-button" data-via="nako_new_high" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

php funtions to get information of the article can be searched by Documentation.

Put the link and add php functions in content-single.php and content-page.php.

3. Check the Tweet button.

4. Create Tweet card with

Install All in One SEO on your WordPress.

Open All in One SEO > Feature Manager

Activate “Social Meta” and open the page of Social Meta. Input information about thumbnail image and your twitter account.

Access the Card validator and check your card preview.

5.

When you add new post, input information about the article and select thumbnail image in Social Setting Area of All In One SEO Pack.

Result

How to embed twitter timeline on your WordPress web site


2020-02-08 Tips Web WordPress

GOAL

To embed twitter timeline on your WordPress web site as below.

Method

Access https://publish.twitter.com/#

And input URL of your twitter home.

from https://publish.twitter.com/

Choose one of the two styles. If you want to change the size, looking or language of this area, click “set customization options”.

from https://publish.twitter.com/

Change the style and click “Update” button.

from https://publish.twitter.com/

Copy code.

from https://publish.twitter.com/

Open your WordPress Dashboard and click Appearance>Widgets.

Create Text widget and put it into any space you like.

Paste the code copied from https://publish.twitter.com/ and save the widget.