I would like to be able to access a site's HTML in Wordpress in order for fine editing/customization. At the moment, to access the HTML of the page I am going to Chrome Developer tools where I can see all the html for the site in the bottom left-hand window.
But when I try and access it from the Wordpress dashboard, all I can find are files such as 'single.php', which are written using php loops and I cannot seem to trace where the original html elements are.
For example, for changing the number of columns in a contact form 'message' box.
Any ideas?
Wordpress is template-based. As you already mentioned there are templates such as single.php, content.php etc. In order to change the lay-out of the website (or better, the structure) you have to change the corresponding template. If you want to change the style, you have to edit the style.css of your theme.
If you want to change the HTML of individual posts or pages, you can simply click the "edit" button and instead of using the WYSIWYG editor, you can swap to a standard text editor.
Wordpress is very well documented. Here is a guide to get you started on editing files.
WordPress, like pretty much any popular CMS, produces its HTML by combining three basic factors:
The active theme
The enabled plugins
The stored content
While the latter is merely data stored in a database, the other two are responsible for deciding what to pull from the database, how to filter it and how to render it.
So the final HTML your browser receives cannot be a subject of arbitary manipulation. You can change some things by developing your own theme, some others by installing or building extra plugins but not the final, dynamically-produced output.
Consequently, I highly doubt there will ever be a plugin that gives you the opportunity to do what you ask.
Related
We have a asp.net mvc website which is using umbraco CMS system. Now,we want to convert the CMS system to plain HTML pages. We do not have the complete code of the website.
How can we remove CMS system and convert it into flat HTML files easily without writing the code from the scratch for this website.
Why would you want to move away from a CMS? A CMS is build to make things easier and you are moving going back to the dark ages of the internets where we build websites with notepad by typing HTML by hand.
Discaimer: I am an umbraco dev, and I love the product. So I might be biased
To answer your question, I use http://www.httrack.com/ to backup existing (old) websites before moving to a new platform & hosting.
To answer your question:
For every page, view source and copy the shown Html to a new Html file. Make sure you honour the folder structure too.
You could also use https://www.httrack.com/ that might give you what you need.
To try to persuade you not to:
However I would strongly recommend against doing this. Umbraco has great mechanisms in place that give almost comparable speed to a flat file website. It uses an Xml file that gets updated when database values are changed, and builds pages and content from this.
If you flatten your website to plain Html files all your Urls will invariably change and this is super bad for SEO. You will also have a 'mare of a time trying to update the site with new content or editing the same content found across all pages e.g. the main navigation and footer.
A local nonprofit needs a new website. It's a very basic website that simply presents information, nothing past basic HTML/CSS is needed to make the actual site.
The marketing manager would like to be able to edit text sections (upcoming events, jobs) regularly. How would I go about creating the site in HTML/CSS and then allowing them to edit just the text in those sections in an easy way? is that even possible, or would this require more advanced knowledge of actual programming/database languages?
Thanks
No, you can't edit the site with just HTML and CSS. Even if you have JavaScript, you'll need server side code (ASP.NET, PHP, Ruby on Rails, Node.js etc) to store the changed text, since HTML, CSS, and JS run on the client (excluding server side JavaScript based frameworks).
The easy solution is to just use simple HTML and tell him to directly edit the HTML. If he's just a little bit technical, an hour or two of explanation of how HTML works might be enough to get you going.
A CMS solution that is prebuilt and has simple menus for editing things might work nicely. There's plenty of various options to suit your needs.
Otherwise, you can either build a custom site. A custom site that reads text from simple text files might be all it takes (Markdown might be preferable to plain text.) Of course, you can scale it up if you want until you've basically built your own CMS.
You can't do that.
HTML pages are stored on a server (which is just a computer accessible by other computers via an internet connection), when you type in an address in your browser's address bar it sends a request to a server to fetch the corresponding HTML page. Then this page is displayed in your browser.
Now, say you managed to change a text in your browser somehow using HTML/CSS, but you still need to find a way to send these changes back to the server so that these updated pages are accessible by other remote browsers, and the only way of doing this is to use server side languages. They are not really that difficult, you can quickly learn that.
You might like to take a look at this sourceforge project.
This is a file-based system that uses conventional HTML for the webpages, but allows online editing with CKEditor. Requirements are Apache 2 and php 5.3 or later.
There is a testdrive available.
Login with guest.
I have a html template that has multiple pages like home, about us,contact,services,... and I want to convert it to a joomla template.I spent a lot of time for searching a good tutorial in google like this:
http://www.learning.asarayan.com/education-website-design/joomla-training2/334-convert-html-to-joomla-template
but non of them can answer my question: how can I convert ALL pages of html to joomla??I mean that I can convert one page for example home to joomla and define its position but what about other pages?
can anybody introduce me a COMPLETE tutorial???
sorry for my poor english
thanQ
You may start with tutorial posted at below address
http://www.tobacamp.com/tutorial/5-easy-steps-converting-html-template-to-joomla-template/
There is no automatic converter or out of the box solution for this, neither any tutorial to help you.
The best way to sort out the issue is by duplicating the template with the help of Artisteer. You can just recreate the template design and feel with Artisteer. Download link: www.artisteer.com/?p=downloads
You need to change your mindset from that for a static template to that for a dynamic template.
In joomla templates there is a base layout called index.php as you know. But that is very skeletal usually, is just defines some locations on a page, includes your css and javascript that is common to all of your pages. This gives your site a common look and feel and ensures a good user experience.
For your css for the individual pages you would normally just include that in the template.css file or similar.
Within the index file you will see places that say jdoc:inlcude. These are the places that actually include the layouts that provide detailed html for specific blocks on the page, typically there will be one component jdoc (there cannot be more than one) and many modules and module ones as well as some others.
The html for these documents is found in the components/com_componentname/view/viewname/tmpl folders.
To override the core layouts you use the template override system by placing same named files in the html folder of your template. You can look at the included templates to see how this works. There is pretty good documentation of this on the joomla documentation site.
http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core will get you started.
Also this may be a point of confusion. In a CMS you strive to separate content from presentation. So if you enter the core information in the cms, i.e enter the contact information in com_contact, and enter most of your current content into individual articles you will start to see how it actually works. I would usually recommend first entering all of your static content into the appropriate places, then work on making the rendered pages look exactly the way you want them to.
I have made a couple of simple Joomla websites before. Those are using a custom template made by myself. They are easy websites as they have a simple linear menu, all pages have the same layout, just some articles are changing between pages.
But in my new project, I have a ready html website that I have to convert to Joomla. The problem is, there is no one repeating menu and there is no consistent layout. To simplify a bit: there are 10 pages and they all have different layouts. Between pages background changes, menu position changes, menu content changes, content box positions change, everything changes. This means I'm not able to do this site as I've done before, using one template index.php which simply contained my repeating page structure.
I am dreaming of a way to simply change ready_page1.html to ready_page1.php, adding some modules inside the php (which are then available for online editing, which is the reason switching to Joomla). I would do this to each page. The custom menus inside each page I would "manually" point to the according php files instead of the old html files. Is this method possible somehow? I couldn't figure out how to do this.
I don't care loosing lots of Joomla basic functionality due to this crude method, I just want the simplest way to do this.
In the end, I just want the exact same website I already have on html, but I want some chosen rectangular areas in the html pages to be editable Joomla modules. The modules would have the pen icon for editing. That's it, no other functionality is necessary.
Sounds like the site you are converting is a usability nightmare. Consistency is part of giving the user a positive experience. That said, if you have to make it exactly the same, then the easiest way is to do it the right way to begin with.
First, you need to learn about page class suffixes. You can add those to a menu item so that you can control the CSS on a per page basis. This will allow you to change backgrounds and other elements on each page.
Documentation - http://docs.joomla.org/Page_Class_Suffix
Next, you will need to make a template so that each of the module positions is collapsible. If you plan out the positions, you should be able to use a single index.php for the entire site. We have a custom template that we use for every site we do and it rarely needs to be touched because all of the positions we would possibly want to use are already there, they just don't get used until a module is put in the position.
Documentation - http://docs.joomla.org/Collapsing_columns
You will also want to make sure you understand menu assignments. You should be able to assign the modules to the pages as needed to create the layout you want for each page. If you are using 2.5.x, then you can probably get by with the built in menu assignment features. If you are using 1.5.x then (you really should upgrade) you will probably want to use Advanced Module Manager as it makes menu assignments much easier and more flexible.
Documentation - http://docs.joomla.org/Help15:Screen.modules.edit.15#Menu_Assignment
Once you get a good grasp of how Joomla templates work and how they are supposed to be used you will find that you can basically do anything you want within the framework so you don't lose any functionality.
build your website and create those 10 pages (contents, heirarcy, and so on..).
then create your templates based on those html files. this is where you adapt the html into a joomla template. after this step, you should end up with at most 10 templates depending on your styles (crude but quick)
as far as i know and from the documentation, Joomla 1.7 supports "template per page" (see the screenshot). you can pick out which style will be applied to which item. it even applies to subpages. another documentation here
Let say you are working on a website template that has many pages (index.html, blog.html, contact.html...). You start by designing the home page and then move on to other pages. While you are on other pages, you think of some improvements and these improvements must affect the whole website.
So I return to each page and make the change. This is quite unproductive especially when you have 6 or more pages and sometimes you forget to update the change.
If it were PHP, I would do
require ('header.php');
This worked for me well. But right now, I'm working on HTML and don't really like to transform to PHP and then again to HTML.
So do you have a specific method/way of doing this?
You can use server-side includes to get the effect you want, if your server supports them.
You can use PHP to include a number of smaller HTML files. The PHP script is minimal. No "transform" is required. Just something like require('header.html'); require('body.html'); require('footer.html'); or some such.
If what you're worried about is having to write a lot of PHP, you can use a templating engine such as Smarty TPL to clearly separate the code from the pages and minimize the amount of coding you have to do. This has the added advantage of having HTML "generators" that will automatically do things like producing radio buttons for you or obfuscating email addresses.
You can use CSS to centralize styles for your page so you can make site-wide appearance, layout, and design changes by modifying the stylesheet.
If you're working with HTML pages, (e.g. including extensions .htm and .html), consider using Server Side Includes. This approach works with basic HTML parsing, and is supported by most/all major web servers, including Apache and IIS.
Simply include this text in your .html file:
<!--#include virtual="header.html" -->
The web server will then fetch the markup in that file, and will insert it inline in the page it's currently serving.
You could use PHP as a pre-processor, a code generator. Run the PHP on your local computer, then save the static HTML pages it produces and post them to production. You could write a little script to visit each of your PHP pages and save the corresponding HTML. Then you could have the convenience of PHP at design time and the simplicity of HTML in production.