I'm trying to add the following code
<!DOCTYPE html>
<html version="HTML+RDFa 1.0">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<link href="https://socialhub.s3.amazonaws.com/production/styles/sr-socialhub.carousel.default.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Note - you may not need to include jQuery if you already have it. -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://socialhub.s3.amazonaws.com/production/scripts/app-carousel.min.js"></script>
</head>
<body>
<div ng-app="ngSocialHub" ui-view
ng-social-hub-carousel
ng-social-hub-customer="news"
ng-social-hub-board-id="out-and-about"
ng-social-hub-infinite-scroll="true"
ng-social-hub-dialog-enabled="false"
ng-social-hub-locale="en"
ng-social-hub-facebook-appid="<YOUR FACEBOOK APP ID HERE>"
ng-social-hub-interval="5000"
ng-social-hub-disable-user-actions="false"
ng-social-hub-disable-carousel-indicator="true"
></div>
</body>
</html>
into a page as inline code to my site http://dtcm.co.nz, for some reason this code doesn't seem to work with my wordpress based site, I have also tried it on another wordpress site which has no plug ins and it did not work. The company who provided the code have had success with wordpress sites, however sometimes have come into problems. will there be anything that will be restricting my wordpress from allowing this inline code to work?
Related
I have a very basic webpage with two files, index.php and style.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
Example text
</body>
</html>
body {
text-align: center;
}
If I navigate to www.example.com this page loads correctly. WAMP automatically takes me to index.php. However if I navigate explicitly to www.example.com/index.php the css fails and everything reverts back to the default of being left-aligned.
EDIT: I originally blamed this on a GET variable but I have realised that's not the issue
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>**********</title>
<link href="css/main.css" rel="stylesheet" />
<link href="css/home.css" rel="stylesheet" />
</head>
<body>
<?php
// top navigation
require_once("require/top_navigation.php");
// header
require_once("require/header.php");
// main
require_once("require/main.php");
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v5.0&appId=411386782258918&autoLogAppEvents=1"></script>
</body>
</html>
...
I haven't done much direct php for a while, but when I seem to use the require_once it adds a blank text element followed by 1. I've looked all over google and everyone that I've come across says it's because of BOM. So I checked on the editor that I use 'Visual Studio Code', and it's not enabled, by default it's UTF-8 without BOM.
The apache software is Xampp.
my website is constructed using PHP. If I visit on this page
www.xyz.com/post.php
then this is work correctly in mobile as well as pc. If I visit on this page
www.xyz.com/post/23/what-is-php
then bootstrap not loading in both devices.
if I use the base href and meta viewport... something like this below
<base href="http://localhost/postblog/post.php">
<body style="background-color: #EAEAEA">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
then its work only in pc but not in mobile device...this is the problem
full head code
<head>
<base href="http://localhost/postblog/post.php">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Blog Home - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="home/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="home/css/blog-home.css" rel="stylesheet">
I use the httpaccess for frindly url...i think problem is arising for this
remove shrink-to-fit=no
<meta name="viewport" content="width=device-width, initial-scale=1">
add a slash to get content from home
<!-- Bootstrap core CSS -->
<link href="/home/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/home/css/blog-home.css" rel="stylesheet">
shrink-to-fit=no will just let any overflow fall off the screen. I would recommend trying without.
I've added the code
<meta name="viewport" content="width=device-width, initial-scale=1" />
to the HEAD of my webpage the Index.php at DuchyBrass.co.uk
It is on Line 6 of the source code, but the site runs on a bespoke CMS so the HEAD is defined in its own file and imported.
index.php
<!DOCTYPE html>
<html lang='en'>
<head>
<?php include 'app/common/head.php'; ?>
</head>
<body>
...
head.php
<title>Duchy Brass</title>
<meta charset="windows-1252" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="google-site-verification" content="QsU348JA47VLcAbTUic-Un90bVlGuVk3a9A34doxsvc" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Viga' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="imgs/favicon.ico">
<link rel="canonical" href="http://www.duchybrass.co.uk" />
As far as the browser is concerned (I assume) that viewport tag is visible, but it is not seen by that Mobile SEO tool. Is this something to do with the CMS, loading the information too late, or is this a common issue that I should ignore?
The top of my Index page (using view page source from the browser) looks like
/ (page source)
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Duchy Brass</title>
<meta charset="windows-1252" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
...
TL;DR: clear caches and check if there is no content before head (ctrl+U)
I had a similar problem, in my case there were content being included trough PHP before my wordpress header call,
check it with Ctrl+U (see source) and be sure there is nothing before the
<!DOCTYPE html>
<html lang='en'>
<head>
if you change the code and it persists, check if you're using cache, you may have to clear caches of pages and files so the changes take effect before running another PageSpeed analysis
I am new to HTML and hope someone can help me with this.
I am trying to set up a website where the code for every page is saved as a separate php file.
Since all these pages use the same document head and includes I would like to remove as much as possible of this from the pages and save it in a separate includes file (header.php) which I can then include using PHP.
My current head looks as follows and since this is the same on all pages I currently have ALL this saved in the separate header.php file and then just use <?php include "header.php"; ?> on the single pages.
Can someone tell me which parts of this should remain on the single pages for a proper setup and if anything should be changed or added here ?
Note: jQuery and JS are included separately in the footer.
My PHP (header file):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="John Doe" />
<meta name="description" content="Created: 2015-06" />
<base href="http://www.MyURL.com" target="_self" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="includes/styles.css" />
<!-- CSS - Font Awesome -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<title>My Page</title>
</head>
<body>
<div class="wrapper">
<!-- ... -->
Your Top head file (top_head.php):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php if(isset($page_author)){ ?>
<meta name="author" content="<?php echo $page_author; ?>" />
<?php } ?>
<?php if(isset($page_description)){ ?>
<meta name="description" content="Created: 2015-06" />
<?php } ?>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="includes/styles.css" />
<!-- CSS - Font Awesome -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<title><?php echo $page_title; ?></title>
Your current header file:
<?php
$page_title = 'Hello';
$page_description = 'This is a beautiful description';
?>
<?php include("top_head.php"); ?>
</head>
<body>
<div class="wrapper">
<!-- ... -->
Since you are starting your tag in header.php, you can close the tag on the own page itself (i mean the other pages ie: Contact, About Us, Product, etc...).
The code section you have mentioned in the question can be called as header.php and further can be included on each and every page where it is required.
Apart from this
Header - header.php
Main content - main-content.php - this will be specific to each and every page from your website
Footer - footer.php - this can also be made common - and further included in every page.
Apart from this you can also have a few more php files which might have navigation or any kind of common content blocks.
Example page could be:
<?php
include 'header.php'
/*either add here the content or include further php files*/
include 'about-us.php'
include 'footer.php'
?>
You are doing right, the parts that are shared between all the pages should be placed in a separate php file, this greatly improve your life when you have to maintain the site (immagine add a stylesheet or a library to every page of your site after some time ...).
To help SEO you should specify a title and maybe some meta tag that are page specific.
Also consider carefully if you have other parts that are repeated in every page for example a left or right bar or a particular widget (for example a banner image or something like that)
This should give you the general idea...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="John Doe" />
<meta name="description" content="Created: 2015-06" />
<base href="http://www.MyURL.com" target="_self" />
<!--
Your paths need to relative to the websites root directory or the full
URL else they may not work depending on where the file is located.
-->
<link rel="stylesheet" type="text/css" href="/includes/styles.css" />
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<!--
This line just echos the title if one has been set or a default string
if the title hasn't been set. You will need to ensure every page that
includes this file sets the title before including this file. You may
also want to take this approach with other values.
-->
<title><?php echo isset($title) ? $title : 'Default Title'; ?></title>
</head>
<body>
<div class="wrapper">