WordPress 项目实训营

课程大纲

Project Introduction
Welcome 入营会
Wordpress.com vs Wordpress.org
• 优点
• 缺点
为什么学 Wordpress
• 对于 junior 来说最好找的技术栈
• PHP 占比最高的框架
• 接私活散活效率很高
学习难点
• Wordpress ACF (Advanced Custom Fields) 比较复杂，客户一般自己搞不定
• 维护比较复杂
• 定制化难度比较高
• 开发理念流程比其他技术栈来说比较繁杂
Hosting
Networking & Domain Management
Networking 101
1. Introduction to Networking
• Definition and importance of networking
• Basic networking components (router, switch, modem)
2. Understanding IP Addresses
• What is an IP address?
• IPv4 vs IPv6
3. DNS Explained
• Function of the Domain Name System (DNS)
• How DNS works
4. TCP/IP Model
• Overview of the TCP/IP model
• Layers of the TCP/IP model
5. Common Networking Protocols
• HTTP and HTTPS
• FTP and SFTP
• SSH
Domain Name
1. What is a Domain Name?
• Definition and examples
• Importance of a good domain name
2. How Domain Names Work
• Domain name structure
• TLDs, SLDs, and subdomains
3. Registering a Domain Name
• Choosing a domain name registrar
• Tips for choosing a good domain name
4. Managing Domain Names
• Renewals and transfers
• Privacy and security considerations
Web Hosting with AWS Lightsail
1. Introduction to AWS Lightsail
• Overview of Lightsail
• Benefits of using Lightsail for web hosting
2. Setting Up a Lightsail Instance
• Choosing an instance image (OS or application stack)
• Configuring instance settings
3. Connecting to Your Instance
• SSH into your instance
• Using the Lightsail console
4. Deploying a Website on Lightsail
• Uploading files to your instance
• Setting up a web server (Apache, Nginx)
Using Route 53 for Domain Management
1. Introduction to Route 53
• Overview of Route 53 features
• Benefits of using Route 53 for domain management
2. Configuring DNS with Route 53
• Creating a hosted zone
• Setting up DNS records (A, CNAME, MX)
3. Integrating Route 53 with Lightsail
• Pointing a domain to a Lightsail instance
• Managing DNS records in Route 53
4. Advanced Route 53 Features
• Health checks and monitoring
• Traffic routing policies
WordPress Database Migration
WordPress database migration and file management are crucial for various tasks like moving your site to a new host, staging development changes, or backing up your site.
Note: This is an easy safe way of updating the live site for the client.
Understanding WordPress Files and Database
WordPress consists of two main components: the files and the database. The files include WordPress core, themes, plugins, and uploads, while the database stores your site's content and settings.
Files to Manage
• WP-Content: Contains themes, plugins, and uploads. This is where most of your site's customization and media files reside.
• WP-Config.php: The WordPress configuration file that contains database connection details and other settings.
• .htaccess: Manages permalink structures and redirects. It’s a hidden file in the root directory of your WordPress installation.
Database
• Posts and Pages: Stored in the wp_posts table.
• Comments: Stored in the wp_comments table.
• Users: Stored in the wp_users table.
• Settings: Site and plugin settings are scattered across various tables like wp_options.
WordPress Database Migration
Step 1: Export the Existing Database
1. Using phpMyAdmin: Access phpMyAdmin from your hosting control panel, select your WordPress database, and click on the "Export" tab. Choose the "Quick" method and format as "SQL" then click "Go" to download the .sql file.
2. Using a Plugin: Plugins like WP Migrate DB, UpdraftPlus, or Duplicator can simplify the export process.
Step 2: Import the Database to the New Host
1. Using phpMyAdmin: Create a new database on your new host, access phpMyAdmin, select the new database, click on the "Import" tab, choose your .sql file, and click "Go".
2. Using a Plugin: If you used a plugin for export, follow the plugin’s instructions to import.
Step 3: Update the WP-Config.php File
Adjust the DB_NAME, DB_USER, DB_PASSWORD, and DB_HOST values in your wp-config.php file to match the new database details.
File Management and Site Migration
Step 1: Transfer Files
1. Via FTP/SFTP: Use an FTP client like FileZilla. Connect to your old host, download your WordPress files, then upload them to the new host.
2. Via a Plugin: A migration plugin can handle both files and database. Follow the plugin's instructions for transferring your site.
Step 2: Update URLs
If your domain remains the same, URLs in the database should be fine. However, if the domain changes, you’ll need to update URLs in the database. This can be done with:
• SQL Query in phpMyAdmin: Use a query like UPDATE wp_options SET option_value = replace(option_value, '<http://www.oldurl>', '<http://www.newurl>') WHERE option_name = 'home' OR option_name = 'siteurl';
• Using a Plugin: Plugins like Better Search Replace can update URLs through a simple interface.
Step 3: Fix Permalinks
After migrating, go to Settings > Permalinks in the WordPress dashboard and simply click "Save Changes" to reset the permalink structure.
Best Practices and Tips
• Backup: Always make a backup of both your files and database before starting migration.
• Test After Migration: Check your site thoroughly after migration for any broken links or missing files.
• Maintenance Mode: Consider putting your site in maintenance mode during migration to prevent data loss or inconsistencies.
• Security: After migrating, ensure all your WordPress, themes, and plugins are updated to the latest version for security reasons.
WordPress Build
Docker 101

Prerequisites

• Install Docker Desktop on your machine. Ensure it's running before you proceed.
• Basic knowledge of Docker concepts and command-line interface (CLI) usage.

Step 1: Create a Docker Compose File

1. Create a new directory for your WordPress project.
2. Inside the directory, create a file named docker-compose.yml.
3. Open the docker-compose.yml file in a text editor and add the following content.

Step 2: Start Your WordPress Site

1. Open a terminal or command prompt.
2. Navigate to the directory containing your docker-compose.yml file.
3. Run the following command to start your WordPress and MySQL containers.
4. Docker will download the necessary images and start the containers as specified in your docker-compose.yml file.

Step 3: Access Your WordPress Site

1. Open a web browser and go to http://localhost:8000.
2. You should see the WordPress installation screen. Proceed with the WordPress installation by choosing a language, and then enter the site details (site title, username, password, and email).

Step 4: Develop and Test

• You can now develop and test your WordPress site locally. All changes will be saved within the Docker containers.
• Use WordPress plugins and themes to customize your site as needed.

Step 5: Shutting Down

1. To stop your WordPress site, return to the terminal or command prompt.
2. Navigate to your project directory.
3. Run the command.

This command stops and removes the containers created by docker-compose up. The db_data volume persists even after the containers are removed, ensuring your database data is saved across container restarts.

Step 6: Managing Data and Customization

• Persistent Data: The db_data volume stores your database content. If you want to start fresh, you can delete this volume by running docker volume rm <volume_name>.
• Themes and Plugins: To install themes and plugins, use the WordPress admin interface or add them directly to the WordPress container using Docker commands or a Dockerfile.




PHP
WordPress PHP 101 and Debug
Introduction to WordPress
WordPress is a powerful content management system (CMS) written in PHP that allows you to create and manage websites easily. It's known for its flexibility, extensibility through plugins and themes, and a large supportive community.
WordPress Folder Structure
Understanding the WordPress folder structure is essential for development and debugging. Here’s a brief overview:
• wp-admin: Contains administrative files. This directory has the files necessary to create the WordPress dashboard.
• wp-content: The heart of your WordPress site from a developer's perspective. It includes:
• Themes: Located in wp-content/themes, this is where WordPress themes are stored. Each theme has its own directory.
• Plugins: Located in wp-content/plugins, here you'll find the plugins that add functionality to your WordPress site.
• Uploads: Your media files are stored in wp-content/uploads. This includes images, videos, etc., uploaded through the WordPress media uploader.
• wp-includes: Contains most of WordPress core software, including libraries and functions used by themes and plugins.
• Root Directory: The root contains core WordPress files like wp-config.php (crucial for setting up your WordPress installation's configuration), wp-load.php (boots WordPress), and several others essential for WordPress to run.
Basics of PHP for WordPress
PHP is a server-side scripting language designed for web development. WordPress is built on PHP, making it crucial for WordPress development.
Basic PHP Syntax
• Opening and Closing Tags: PHP code is enclosed in <?php and ?>. Everything outside these tags is treated as HTML.
• Comments: Use // for single-line comments and /* */ for multi-line comments.
• Variables: Variables in PHP start with a $ sign followed by the name of the variable. For example, $text = "Hello, World!";.
• Functions: PHP functions are blocks of code that perform a specific task. WordPress has a rich set of built-in functions that you can use within themes and plugins.
WordPress-Specific PHP Functions
• get_header(): Includes the header.php file.
• wp_footer(): Hooks into the footer. Always include this before the closing </body> tag in your theme to ensure scripts and admin bar are correctly output.
• have_posts() and the_post(): Used in a loop to display posts.
• get_template_directory_uri(): Retrieves the URL of the current theme's directory.
Debugging in WordPress
Debugging is an essential part of development. To enable debugging in WordPress:
1. Open wp-config.php.
2. Look for define('WP_DEBUG', false);. Change false to true.
3. You can also log errors to a file by adding define('WP_DEBUG_LOG', true);.
Basic Skills
Basic jQuery

Basic jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers.

• Syntax: The basic syntax is $(selector).action(), where $(selector) is used to find HTML elements, and .action() is the action to be performed on the element(s).
• DOM Manipulation: jQuery simplifies DOM manipulation, making it easy to find elements, change their content or appearance, and add or remove elements.
• Event Handling: With jQuery, event handling becomes straightforward, allowing you to manage user interactions by attaching event handlers to elements easily.

Integration of HTML, CSS, JavaScript, and jQuery

A typical web project involves integrating these technologies to create a complete, functional website.

1. HTML is used to structure the content.
2. CSS styles the content, implementing the visual design.
3. JavaScript adds interactivity, enabling dynamic content changes.
4. jQuery, leveraging JavaScript, simplifies complex tasks like animations, AJAX calls, and event handling.

By mastering these technologies, you can develop rich, interactive web applications. Practice is key, so consider building small projects to apply what you've learned.

Site Building
Setting Up First Theme and Page

Step 1: Setting Up Your Theme Directory

1. Navigate to your WordPress installation in the wp-content/themes directory.
2. Create a new directory for your theme, e.g., my-first-theme.

Step 2: Creating Basic Theme Files

In your theme directory (my-first-theme), you'll need to create at least two files:

• style.css: This CSS file contains the styling rules for your theme. At the top of this file, you need to add the theme details in a comment block.
• index.php: This is the main template file for your theme. It controls what is displayed on your site's homepage by default.

Step 3: Activating Theme

1. Log into your WordPress dashboard.
2. Go to Appearance > Themes. You should see your theme listed there.
3. Hover over your theme and click the 'Activate' button.

Step 4: Adding HTML, CSS, and JavaScript

• HTML: Inside your index.php, you can start with a simple structure.
• CSS: Add styling rules in your style.css to style the <div> or any other elements as you prefer.
• JavaScript: To add JavaScript, create a new file, e.g., script.js, in your theme folder. You can enqueue this script in your theme by adding the following function to your functions.php file (create this file if it doesn't exist).
• Basic jQuery: To use jQuery, remember it's already included in WordPress. You just need to make sure your custom script is dependent on it. Modify the wp_enqueue_script function by adding 'jquery' as a dependency.

Step 5: Creating First Page

1. Log into your WordPress dashboard.
2. Go to Pages > Add New.
3. Give your page a title, e.g., "Home".
4. In the page editor, you can add content directly or use the block editor to add various elements.
5. Publish your page.

Step 6: Setting Your Homepage

1. Go to Settings > Reading in your WordPress dashboard.
2. Set "Your homepage displays" to "A static page".
3. Select the page you just created as your Homepage.
4. Save changes.




Timber & Twig

Introduction to Timber and Twig

• Timber: A WordPress plugin that brings modern templating to WordPress by integrating the Twig template engine. It allows developers to write cleaner code by separating PHP logic from the HTML templates.
• Twig: A template engine for PHP that simplifies the template creation process, making it more intuitive and cleaner. It provides a syntax that's both easy to write and understand.

Getting Started with Timber and Twig

1. Installing Timber

First, install Timber as a plugin in your WordPress site. You can do this by:

• Navigating to the WordPress admin dashboard, going to Plugins > Add New, searching for "Timber", and installing the plugin.
• Alternatively, you can download it from the WordPress plugin repository and upload it to your wp-content/plugins directory.

2. Activating Timber

Activate the Timber plugin through your WordPress dashboard by going to Plugins and clicking the "Activate" link under Timber.

Creating a Basic Timber Theme

1. Theme Structure

Create a new theme directory in wp-content/themes, for example, my-timber-theme. The basic files you'll need are:

• style.css: To define your theme's metadata and styles.
• functions.php: To enqueue styles/scripts and initialize Timber.
• index.twig: To define the HTML structure of your theme's main page using Twig syntax.

2. Theme Setup in functions.php

In your theme's functions.php, initialize Timber and set up theme support features.

3. Creating Your First Template with Twig (index.twig)

Create a templates directory inside your theme, and within it, create your first Twig file, index.twig.

4. Rendering Twig Templates in WordPress

In your theme's functions.php, you'll need to tell WordPress to use Timber and Twig for rendering templates. For the homepage.

Advanced Timber Usage

• Custom Post Types: You can create templates for custom post types by adding Twig files named after the post type, e.g., single-my_custom_post_type.twig.
• Context: Pass data to your templates using Timber's context. In functions.php, you can modify the context.
• Timber Posts: Fetch and display posts in your Twig files using Timber's Post and PostQuery objects.




Customized ACF with Twig

Advanced Custom Fields (ACF) is a powerful plugin for WordPress that allows you to add custom fields to your content. When combined with Timber and Twig, you can create highly customized and dynamic WordPress themes. Here's how to use ACF with Twig in your Timber-powered WordPress theme:

Step 1: Install and Activate ACF

First, ensure that the Advanced Custom Fields plugin is installed and activated on your WordPress site.

Step 2: Create Custom Fields

1. In the WordPress admin, navigate to Custom Fields and create a new field group.
2. Add the fields you want, such as text, images, or repeaters, and configure their settings.
3. Set the location rules for where your fields should appear (e.g., on all pages, specific post types, etc.).

Step 3: Accessing Custom Fields in Timber

To access ACF fields in Timber, you can use Timber's Post object which automatically integrates with ACF. For example, if you've added custom fields to a post, you can access them like this in your Twig template:

twigCopy code
{% set post = Timber\\Post(post.ID) %}
<p>{{ post.meta('your_custom_field_name') }}</p>

Alternatively, if you want to directly access ACF fields without using meta(), Timber allows you to access ACF fields directly by their names for the current post:

twigCopy code
<p>{{ post.your_custom_field_name }}</p>

Step 4: Working with Repeater Fields

ACF's Repeater fields allow you to create a set of sub-fields which can be repeated again and again. In Timber and Twig, you can iterate over these fields as follows:

twigCopy code
{% if post.get_field('repeater_field_name') %}
    <ul>
        {% for item in post.get_field('repeater_field_name') %}
            <li>{{ item.sub_field_name }}</li>
        {% endfor %}
    </ul>
{% endif %}

Step 5: Displaying Flexible Content Fields

ACF's Flexible Content field is a versatile type that allows you to create a set of layouts. Accessing and displaying these fields in Twig requires iterating over the layouts and displaying them based on their layout name:

twigCopy code
{% for layout in post.flexible_content_field_name %}
    {% if layout.acf_fc_layout == 'layout_name' %}
        <div>{{ layout.some_sub_field }}</div>
    {% endif %}
{% endfor %}

Step 6: Options Pages

If you're using ACF's Options Page feature to store global settings, you can access these fields in Timber as follows:

twigCopy code
{% set options = Timber::get_options() %}
<p>{{ options.your_options_field_name }}</p>

Step 7: Adding ACF Fields to Timber Context

For fields you want to be globally accessible across all templates, you can add them to the Timber context in your theme's functions.php file:

phpCopy code
add_filter('timber/context', function ($context) {
    $context['options'] = get_fields('option');
    return $context;
});

Now, any ACF field defined in an Options Page can be accessed directly in Twig templates via the options variable:

twigCopy code
<p>{{ options.your_global_option_field }}</p>




Hosting
Yoast SEO + robot.txt
Combining Yoast SEO with proper robots.txt management can significantly improve your website's search engine optimization (SEO). Yoast SEO is a comprehensive WordPress plugin that helps optimize your site's content, while the robots.txt file instructs search engines on how to crawl your website. Here's how to use both effectively:
Understanding Yoast SEO
Yoast SEO is a plugin for WordPress that provides tools for optimizing your site's content for search engines. Some of its key features include:
• SEO Analysis: Offers recommendations to improve your posts and pages for targeted keywords.
• Readability Analysis: Suggests improvements for the structure and style of your text.
• XML Sitemaps: Automatically generates XML sitemaps, making it easier for search engines to discover your content.
• Social Media Integration: Allows you to set how your content appears when shared on social media.
• Breadcrumbs: Enables easy navigation for both users and search engines.
Setting Up Yoast SEO
1. Install Yoast SEO: Go to the WordPress admin dashboard, navigate to Plugins > Add New, search for "Yoast SEO," install, and activate it.
2. Configure Yoast SEO: Use the configuration wizard to set up the basics. You can access it from the Yoast SEO menu in the WordPress dashboard.
3. Optimize Your Content: When creating or editing posts/pages, use the Yoast SEO meta box below the editor to optimize your content based on the plugin's recommendations.
Understanding robots.txt
The robots.txt file is a text file located in the root directory of your site. It tells search engine crawlers which pages or sections of your site should not be crawled and indexed. Proper management of this file is crucial for SEO as it can prevent search engines from indexing duplicate pages, admin pages, or sensitive sections of your site.
Configuring robots.txt with Yoast SEO
Yoast SEO does not directly create or edit the robots.txt file. However, it allows you to edit the file from the WordPress dashboard:
1. Access Yoast SEO Tools: Go to SEO > Tools in your WordPress dashboard and select the File Editor tool.
2. Edit robots.txt: If you already have a robots.txt file, Yoast SEO will display its contents. If not, you can create one by entering your directives and clicking the "Save changes to robots.txt" button.
Best Practices for robots.txt
• Do Not Block Important Content: Ensure you're not inadvertently blocking search engines from indexing important content or resources that affect your site's rendering and ranking.
• Allow Access to XML Sitemaps: Make sure your robots.txt file allows access to your XML sitemap. You can do this by adding a line like Sitemap: <http://www.yourwebsite.com/sitemap_index.xml>.
• Use Disallow Carefully: Use the Disallow directive to prevent crawlers from accessing specific directories or pages. For example, Disallow: /wp-admin/ blocks access to the WordPress admin area.