: Create single HTML file from many HTML files by keeping header, sidebar & footer section common I don't know whether I am missing a trick in HTML. I have one simple HTML website which has
I don't know whether I am missing a trick in HTML. I have one simple HTML website which has over 100 HTML pages. For each page the header, sidebar & footer section are the same but the content is different. Can I simply make this site like Wordpress where the page is formed by header.php, footer.php, page.php & sidebar.php. I know I will still have to work on page.php kind of files.
This will simplify the file structure of the site. Also I want to know whether this solution is good in SEO perspective or not.
More posts by @Lee4591628
6 Comments
Sorted by latest first Latest Oldest Best
I don't know whether I am missing a trick in HTML.
Google thinks that in the future, there will be a feature where files can be included via an HTML tag.
I have one simple HTML website which has over 100 HTML pages. For each page the header, sidebar & footer section are the same but the content is different. Can I simply make this site like Wordpress where the page is formed by header.php, footer.php, page.php & sidebar.php. I know I will still have to work on page.php kind of files.
Yes. Here's a code template in php that I made now that will work:
<?php
$includepath="/path/to/your/includefiles";
chdir($includepath);
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<?php include "header.php"; ?>
<div>
<div style="float:right;">
<?php include "sidebar.php"; ?>
</div>
<!-- Main page content goes here -->
</div>
<?php include "footer.php"; ?>
</body>
</html>
If you can copy that template and put all the php files in the same folder and set $includepath to that folder, then you'll be good. I used a div float box for a side bar but if you want to go old-fashioned, you could use a table as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<?php include "header.php"; ?>
<table>
<tr>
<td>
<!-- Main page content goes here -->
</td>
<td>
<?php include "sidebar.php"; ?>
</td>
</tr>
</table>
<?php include "footer.php"; ?>
</body>
</html>
Only thing with a table is many people may frown on it because it isn't the best thing to use for responsive design.
Also I want to know whether this solution is good in SEO perspective or not.
It will make no difference with SEO unless your server has a badly functioning disk with bad sectors attached to the requested files or the php engine is extremely slow. These things are extremely rare, but I'm sure they happen. Website speed affects SEO.
Just create your own tiny framework
A very simple version of your request would be something like this:
<?php
$templateLocation = $_SERVER['DOCUMENT_ROOT'].'/templates';
$defaultPage = 'home';
// Open your page with the frame, the footer , header etc
$template = file_get_contents($templateLocation.'/main_template.html');
// Get the page from the url, or use a default
$page = isset($_GET['page']) ? $_GET['page'] : $defaultPage;
// Check if the page exists:
if( !file_exists($templateLocation.'/pages/'.$page.'.html') ){
// if it doest exist, go to the homepage (and tell bots 404, page not existing):
header("Location: /".$defaultPage, true, 404);
exit;
}
else{
// Get the content of the requested page
$pageContent = file_get_contents($templateLocation.'/pages/'.$page.'.html');
// Place it in our main page
$template = str_replace("<!-- CONTENT -->", $pageContent, $template);
// Put it on the screen:
echo $template;
}
Matching html example for main_template.html:
<html>
<body>
<header> <img src="my-logo.jpg" alt="Logo"/> </header>
<div id="PageContent"><!-- CONTENT --></div>
<footer> Some neat information right here</footer>
</body>
</html>
You can now link to your pages with ?page=example or ?page=puppies and the code above will check if the page exists, is so -> load it.
Now we have a simple framework for switching pages, but SEO-wise it's terrible. No titles, no meta's. Let's fix that!
Let's add a little SEO to the mix
At this point it's a bit more difficult to help you with an answer. I'm going to base my answer on the fact that you have or can learn basic mysql functionallity. This could be done with more templates, but you want to save time, let's do it right the first time.
Just create a database table with the columns id,url,title,description
<?php
$sPageInfo = mysqli_query("SELECT * FROM pages WHERE url='".$page."' LIMIT 1");
$fPageInfo = $sPageInfo->fetch_assoc(); // fetch the selected values
$template = str_replace("<!-- SEO_TITLE -->", $fPageInfo['title'], $template);
$template = str_replace("<!-- SEO_DESCRIPTION -->", $fPageInfo['description'], $template);
Just place that piece of code above your echo $template; and add the corresponding comments to your template.
Note: The query is MEGA unsafe, read up on mysql injections to improve this. That is a must! My example is easier to read like this, but you REALLY should implement it.
Note 2: If you're feeling brave, expand your database with a column called 'content' and load that instead of a template ;)
Step 1:- Create a index.php in your Website folder and remove index.html.(index.html has preference over index.php)
Step 2:- Create a header.php and footer.php and place all your code in header and footer.
Step 3:- Now include header.php and footer.php in index.php :- in place of the top header stuff, do the same for footer, head section, etc.
Step 4:- You will need to change extensions of all files to .php from .html.
<html>
<head>
<title>Page title</title>
<?php include('header.php'); ?>
</head>
<body>
enter content here
<?php include('footer.php'); ?>
</body>
</html>
Another Approach :-
Step 1 :- Download Twenty Thirteen WordPress Theme and just change header.php and footer.php and sidebar.php.
Step 2 :- Publish pages and copy all html content (excluding header and footer) in the source section of every page.
Yes, you can do this by using PHP include statement to call your header, sidebar and footer whenever you need to include them in a page using <?php include 'header.php';?>
Note: In this case would be better to create files with the .phtml extension, so you can either put HTML or PHP code inside of it. <?php include'header.phtml';?>
The include (or require) statement takes all the text/code/markup
that exists in a specified file and copies it into the file that
uses the include statement. Including files is very useful when you want to include the same PHP,
HTML, or text on multiple pages of a website.
Including files saves a lot of work. This means that you can create a
standard header, footer, or menu file for all your web pages. Then,
when the header needs to be updated, you can only update the
header.php file.
Let's say we have a code for the header within a file called "header.php" that looks like this:
<header class="header">Welcome to my website!</header>
To include the header file in a page, use the include statement:
<html>
<body>
<?php include 'header.php';?>
<p>Some text.</p>
<p>Some more text.</p>
<footer class="footer"> ... </footer>
</body>
</html>
When to use include and when to use require?
The require statement is also used to include a file into the HTML/PHP code.
However, there is one big difference between include and require. When a file is included with the include statement and PHP cannot find it, the script will continue to execute, while when using the require statement a fatal error will be produced:
require will produce a fatal error (E_COMPILE_ERROR) and stop the the script
Use require when the file is required by the application.
include will only produce a warning (E_WARNING) and the script
will continue
Use include when the file is not required and application should continue when file is not found.
Yes, you can absolutely split your site into sections like you describe and use simple include() statements if PHP is available or SSI directives to call them. Before the rise of CMS platforms, this is how many people created sites with consistent and easy to modify sections.
Building your pages that way has no positive or negative effect on SEO. So long as you include all of the necessary elements for SEO (title tags, meta description, rel author, etc) then your site will do as well as it did before.
What CMS's like WordPress do for you is force you into "better" (not best) practices for SEO by doing things like requiring titles for all content and automatically generating a menu system that a spider can crawl. Via the use of extensions/modules/plugins you can add more advanced SEO techniques to the site but you can also do it by hand on a non-CMS site. Ultimately working with a CMS makes things easier for some people as it automates a lot of aspects of site-building. But that same automation has drawbacks and some people prefer to hand-code everything and retain pinpoint control over all aspects of the page. Ultimately you will decide to do what is best for your development style and site needs.
Content Management Systems such as WordPress don't really improve SEO since you can do everything in Static HTML form than you can in a WordPress.
WordPress just makes thing's a hell of lot easier for managing your pages as well as creating SEO friendly URLS. You should see using a Content Management System as making your job easier and freeing up time to make even more content - If we was to save time saved and time spent on constructing pages then yes it does improve SEO.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.