WordPress sites are beautiful but difficult to flatten to html because they contain a lot of include files, CSS formatting and Javascript.
They also site atop a back-end database. WordPress works great on the LAMP (Linux, Apache, MySQL, PHP) platform. The question is what happens when you move your beautiful and highly configured WordPress site onto a non-LAMP server, such as a Microsoft server? This article explains how to WordPress Flatten To HTML so your site will work as plain HTML. Note: WordPress Flatten To HTML is not easy but if you have to do it this article will show you the best way to get it done.
There are times when WordPress Flatten To HTML is essential, like when you have years of development in a Windows database and want to change the look. If you’re an experienced web designer you have a “chance” of pulling this off. If you’re not an experienced web designer and need to flatten your WordPress site, call us to discuss the project.
1. Create a folder on your desktop.
The success of the process depends on all files being in the correct location relative to each other. The concept is to throw down a folder first, then place all your files inside the folder. Keep everything as simple as possible by placing all files in the root folder.
2. Save the HTLM from the Web Browser
Theoretically you have everything you need to create your page is displayed or referenced in the page in the HTLM. Your first step is to save the HTML. You do this by navigating to the page on the web, selecting File, then save HTML. Place this main HTML file in your folder.
3. Step Three – Gather your Source Files
A typical WordPress page may reference (call in) as many as 15 files inside the HTML. Normally you don’t need to worry about it but since we’re taking humpty-dumpty apart we need to be mindful of these files. Without them, your page won’t look right. Your task is to find each file on the web, bring it down to your computer, and place it in your web page folder. Here’s how to proceed.
a. Put your page HTML into a text editor such as Tex-Edit or Word Pad. Starting at the top look for links to external files, such as Javascript or CSS files. You can tell links to external files because they begin with Src=http.
b. When you find a link to an external file, put the full http address of the file into the URL of your browser.
c. Both Javascript and CSS files are text files. If you have the correct URL to the external file, its text will show in the browser.
d. Select the text, copy it to the clipboard, and paste it into your text editor.
d. Save the text file to your computer.
e. Place the file in your folder.
4. Step Four – Gather your images
You’ll want to bring down all your images. Most images you can right click, and select Open Image in New Window. From there you should be able to use File, Save As, from the web browser.
Note: certain images, such as background images, aren’t referenced in the HTML. They are referenced from an external style sheet (CSS file). It may take some investigate work to find and save these files. They’re in there somewhere.
5. Step Five – Reconnect Files In Your HTML
Once you have your main HTML file and your support CSS and Javascript files pulled off the web, you need to fix the broken links in your web page HTML. You do that as follows:
a. Take your main HTML file and place it in a web browser. Open Firefox, Safari, or IE. Go to File, Open. Find your HTML file and open it. You should see something – as mess probably – but something.
b. Open your main HTML file again in a text editor like Tex Edit or Notepad.
c. Starting at the top, fix the first link to an external file. Since all your files are in the same folder you no longer need full http links to these files. You just need to reference the filename only. Save your HTML file.
d. Refresh the web page in the browser. If you’ve attached the file, it should improve. Open the Activity Window in your browser. This should tell you what links are still broken. Fix all links, refreshing the web page in the browser as you go.
6. Step Six – Fine Tune Your Page
After connecting everything back up your page should look pretty good. There is one thing remaining. Often time supporting files are calling in files. For example a Javascript file may call in another Javascript file (an include file calling an include file). When this happens you have to find it and fix it. Hopefully there aren’t many cases like this.
As you can see flattening a WordPress web is not an easy task. The code in a WordPress web page is daunting. It’s easy to move a WordPress site to another WordPress server. It’s a lot harder to move a WordPress page to a non-Wordpress server. That is why it is seldom ever done. That said, if you want to preserve the formatting and layout of a WordPress site it may be the only way to go.