CDN integration in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the CDN URL in the WordPress configuration.

Wordpress

define('CDN_URL', '[1]');

Drag options to blanks, or click blank then click option'

A'ftp://cdn.example.com'

B'http://localhost/'

C'https://cdn.example.com'

D'/local-assets/'

Attempts:

3 left

💡 Hint

Common Mistakes

Using local paths instead of full URLs

Using non-HTTP protocols like FTP

The CDN URL must be a valid HTTPS URL pointing to the CDN domain.

2fill in blank

medium

Complete the code to enqueue a CSS file from the CDN in WordPress.

Wordpress

wp_enqueue_style('theme-style', [1] . 'style.css');

Drag options to blanks, or click blank then click option'

Asite_url() . '/'

BCDN_URL . '/'

Cplugins_url() . '/'

Dget_template_directory_uri() . '/'

Attempts:

3 left

💡 Hint

Common Mistakes

Using local theme or plugin URLs instead of CDN URL

To load assets from the CDN, use the CDN_URL constant followed by the file path.

3fill in blank

hard

Fix the error in the code to rewrite asset URLs to use the CDN in WordPress.

Wordpress

function rewrite_asset_url($url) {
    return preg_replace('/^[1]/', CDN_URL, $url);
}

Drag options to blanks, or click blank then click option'

A'https?://example.com/wp-content/uploads'

B'/wp-content/uploads/'

C'http://cdn.example.com/'

D'/uploads/'

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative paths instead of full URL in regex

Missing protocol in regex pattern

The regex must match the full original URL prefix to replace it with the CDN URL.

4fill in blank

hard

Fill both blanks to correctly filter WordPress content URLs to use the CDN.

Wordpress

add_filter('the_content', function($content) {
    return str_replace([1], [2], $content);
});

Drag options to blanks, or click blank then click option'

Asite_url() . '/wp-content/uploads/'

BCDN_URL . '/uploads/'

Cget_template_directory_uri() . '/css/'

Dplugins_url() . '/js/'

Attempts:

3 left

💡 Hint

Common Mistakes

Replacing wrong paths like theme or plugin URLs

Replace the original site upload URL with the CDN upload URL in content.

5fill in blank

hard

Fill all three blanks to configure WordPress to serve static assets from the CDN.

Wordpress

$cdn_assets = [
    '[1]',
    '[2]',
    '[3]'
];

Drag options to blanks, or click blank then click option'

Awp-content/uploads

Bwp-includes/js

Cwp-content/themes

Dwp-admin/css

Attempts:

3 left

💡 Hint

Common Mistakes

Including admin CSS directory

Missing common asset directories

Common static asset directories to serve via CDN include uploads, js, and themes.

Practice

1. What is the main purpose of integrating a CDN with a WordPress site?

easy

A. To disable all plugins for better performance

B. To increase the size of the WordPress database

C. To replace the WordPress hosting server completely

D. To speed up content delivery by caching static files globally

Solution

1. Step 1: Understand CDN function

   A CDN stores copies of static content like images and scripts on servers worldwide to reduce load time.

2. Step 2: Connect CDN purpose to WordPress

   Integrating a CDN with WordPress speeds up site loading by serving cached content from nearby servers.

3. Final Answer:

   To speed up content delivery by caching static files globally -> Option D

4. Quick Check:

   CDN speeds up delivery = A [OK]

Hint: CDN caches static files worldwide to speed up sites [OK]

Common Mistakes:

• Thinking CDN increases database size
• Believing CDN replaces hosting server
• Assuming CDN disables plugins

2. Which of the following is the correct way to configure a CDN URL in WordPress settings?

easy

A. Use a plugin or theme option to specify the CDN URL for static files

B. Add the CDN URL in the WordPress Reading Settings

C. Set the CDN URL in the WordPress General Settings under Site Address (URL)

D. Replace the WordPress Admin URL with the CDN URL

Solution

1. Step 1: Identify where CDN URLs are set

   CDN URLs are usually set via plugins or theme options that rewrite static file URLs.

2. Step 2: Understand WordPress settings roles

   General Settings and Reading Settings do not control CDN URLs; Admin URL is unrelated.

3. Final Answer:

   Use a plugin or theme option to specify the CDN URL for static files -> Option A

4. Quick Check:

   CDN URL set via plugin/theme = C [OK]

Hint: CDN URLs are set via plugins or theme options, not general settings [OK]

Common Mistakes:

• Trying to set CDN URL in General or Reading Settings
• Replacing admin URL with CDN URL
• Not using a plugin or theme for CDN integration

3. Given this WordPress plugin configuration snippet for CDN integration:

define('WP_CONTENT_URL', 'https://cdn.example.com/wp-content');

What will be the effect on loading static files like images and CSS?

medium

A. Static files will load from the original server URL

B. Static files will load from the CDN URL https://cdn.example.com/wp-content

C. Static files will fail to load due to URL mismatch

D. Only CSS files will load from CDN, images from original server

Solution

1. Step 1: Understand WP_CONTENT_URL constant

   This constant overrides the URL for the wp-content directory, where static files reside.

2. Step 2: Effect on static file loading

   Setting WP_CONTENT_URL to the CDN URL causes static files like images and CSS to load from the CDN domain.

3. Final Answer:

   Static files will load from the CDN URL https://cdn.example.com/wp-content -> Option B

4. Quick Check:

   WP_CONTENT_URL sets static file base URL = A [OK]

Hint: WP_CONTENT_URL changes static file base URL to CDN [OK]

Common Mistakes:

• Assuming static files load from original server
• Thinking only CSS or images load from CDN
• Believing URL mismatch causes failure

4. A WordPress site integrated with a CDN shows broken images after setup. What is the most likely cause?

medium

A. The hosting server is down

B. The WordPress database is corrupted

C. The CDN URL is incorrectly configured or missing in the plugin settings

D. The site theme is incompatible with WordPress version

Solution

1. Step 1: Analyze broken images cause

   Broken images after CDN setup usually mean static file URLs are incorrect or unreachable.

2. Step 2: Identify CDN URL misconfiguration

   If the CDN URL is wrong or missing, the browser cannot load images from the CDN, causing broken links.

3. Final Answer:

   The CDN URL is incorrectly configured or missing in the plugin settings -> Option C

4. Quick Check:

   Broken images = CDN URL misconfigured [OK]

Hint: Broken images often mean wrong CDN URL setup [OK]

Common Mistakes:

• Blaming database corruption for image issues
• Assuming theme incompatibility causes broken images
• Thinking hosting server downtime causes only images to break

5. You want to optimize a high-traffic WordPress site using a CDN. Which combination of strategies ensures best performance and security?

hard

A. Use a CDN with SSL support, enable caching for static and dynamic content, and configure cache purging on content updates

B. Use a CDN without SSL, disable caching, and rely only on WordPress caching plugins

C. Use CDN only for images, keep CSS and JS on original server, and disable HTTPS

D. Avoid CDN and upgrade hosting server hardware instead

Solution

1. Step 1: Identify performance and security needs

   High-traffic sites need fast delivery (caching) and secure connections (SSL).

2. Step 2: Choose CDN features for optimization

   Using CDN with SSL ensures encrypted delivery; caching static and dynamic content improves speed; cache purging keeps content fresh.

3. Step 3: Evaluate other options

   Options without SSL or caching reduce security and speed; partial CDN use or no CDN misses benefits.

4. Final Answer:

   Use a CDN with SSL support, enable caching for static and dynamic content, and configure cache purging on content updates -> Option A

5. Quick Check:

   SSL + caching + purging = best CDN practice [OK]

Hint: Combine SSL, caching, and cache purging for best CDN use [OK]

Common Mistakes:

• Ignoring SSL support in CDN
• Disabling caching reduces performance
• Using CDN only partially limits benefits