I'm looking for some tips to clean the code which is generated by WordPress and some plug-ins, because I'm not happy with the code generated by WordPress for two reasons:
The code isn't well formatted. I know, I know... It isn't important since that the browsers don't need to "parse" a well formatted code. However, I like to keep all codes well formatted and it includes HTML code generated by me or third-part systems.
Unfortunately, some parts of the code that WordPress puts on the <head> aren't well formatted and in some cases those parts aren't really necessary. By the way, I have no idea about how to clean-up it or how to hook the function which prints that code.
Is there some way to add tabs / spaces to the code generated by WordPress without change the core files / code?
Thank you!
Overlooking the overall ambiguity of your question, the file you need to edit to fix the <head> element is header.php. You will find it in your theme's folder in wp-contents.
Related
I'm trying to insert an inline SVG of a US map in a Wordpress post. A test page where it's been inserted into the post as an HTML block with some light CSS is here: http://thepostrider.com/test-post/
When I edit it in the Gutenberg editor I can see the SVG and all, but on preview/publish nothing. It's clearly there in the code if you inspect the element on that published page but cannot for the life of me get it to manifest in the post. Historically I've gotten around this by building out custom pages and inserting SVGs into php files, but I do need to start building out this kind of thing in individual posts now too; so I would love some advice.
Take a closer look at the HTML source:
<g id="g5">
<path id="HI" data-info="<div>State: Hawaii</div><div>Capital: Honolulu</div>”
fill=”#D3D3D3″ d=”M407.1,619.3l1.9-3.6l2.3-0.3l0.3,0.8l-2.1,3.1H407.1z M417.3,615.6l6.1,2.6l2.1-0.3l1.6-3.9
l-0.6-3.4l-4.2-0.5l-4,1.8L417.3,615.6z M448,625.6l3.7,5.5l2.4-0.3l1.1-0.5l1.5,1.3l3.7-0.2l1-1.5l-2.9-1.8l-1.9-3.7l-2.1-3.6
l-5.8,2.9L448,625.6z M468.2,634.5l1.3-1.9l4.7,1l0.6-0.5l6.1,0.6l-0.3,1.3l-2.6,1.5l-4.4-0.3L468.2,634.5z M473.5,639.7l1.9,3.9
l3.1-1.1l0.3-1.6l-1.6-2.1l-3.7-0.3V639.7z M480.5,638.5l2.3-2.9l4.7,2.4l4.4,1.1l4.4,2.7v1.9l-3.6,1.8l-4.8,1l-2.4-1.5 L480.5,638.5z
M497.1,654.1l1.6-1.3l3.4,1.6l7.6,3.6l3.4,2.1l1.6,2.4l1.9,4.4l4,2.6l-0.3,1.3l-3.9,3.2l-4.2,1.5l-1.5-0.6l-3.1,1.8
l-2.4,3.2l-2.3,2.9l-1.8-0.2l-3.6-2.6l-0.3-4.5l0.6-2.4l-1.6-5.7l-2.1-1.8l-0.2-2.6l2.3-1l2.1-3.1l0.5-1l-1.6-1.8L497.1,654.1z”/>
... etc ...
It looks to me like Wordpress has converted all your quotation marks into smart quotes (” and ″). That's not going to help.
You would be better off uploading the SVG file as an image and inserting it that way. (You may need to install additional plugins to do this, as Wordpress won't allow SVG uploads in its default state.)
By the way, the next time you ask a question about code or markup, please create a minimal reproducible example and insert it directly into your question. Links to code on other sites are liable to break, making your question useless for others. Thanks.
I'm looking for some advice for adding d3.js charts to Wordpress.
My client has commissioned a forceSimulation - still in progress. It is currently organised as follows:
index.html
main_javascript.js
main_css.css
global_properties.js
data_file.csv
I'm totally clueless as to whether it is possible to add the chart to her Wordpress blog and if so how to do it.... Any advice would be much appreciated.
Many thanks.
For reference, here are the WordPress docs on Using JavaScript.
Making it easy for them
From past experience (though not in WordPress), I'd try to simplify the steps your client has to take to get the visualisation working well, just in case the person doing them has little technical skill.
Hence, as far as possible, I'd combine your files into one force-viz.js:
CSS rules can be inlined by using d3.style in JS on the appropriate elements.
CSV can be inlined as a JavaScript string, parsed with d3.csvParse.
global_properties.js can just be in the same JS file.
index.html is unnecessary if you use d3.select(...).append(...) to construct the DOM tree you want, and instruct your client to write—
<div id="force-viz"></div>
—where they want the chart to appear, then d3.select that in your script.
This would mean all your client has to do is:
Place force-viz.js in a scripts/ directory.
Paste—
<div id="force-viz"></div>
<script src="scripts/force-viz.js"></script>
—into the text of any page, wherever they want the chart to appear.
Making it easy for you
If being forced to program into a single file is annoying, I recommend Browserify. It's a tool that can process a set of JavaScript files with require('whatever.js')-calls to each other, combining them appropriately into one file. With a plugin, it can even turn fs.readSync('data.csv') calls into strings containing that file's contents, which you could use with that CSV file.
That way, you could continue programming the thing as separate files, then run browserify to bundle them up for your client.
Or just do it manually, if this is a one-off project. Your call.
I want to find some way of automatically minifying classes and ids in a .html-file. The file is created through a series of gulp commands. I've tried the command line application Munch, but it ruins the file since it removes doctype and important comments that I have. Does anyone have any tip on how to do this? The best option would of course be something like this:
.pipe(minifyClassesAndIds({ignoreclasses: ['.this', '.that']})
I hope you understand what I mean.
The only working tool I know is a HTML Muncher.
But, unfortunately now it doesn't work very well and have much of issues.
UPD. Don't sure about which munch you are talking about, is it the same as HTML Muncher?
What would be the proper procedure for accessing the current page html data and picking up all of a certain tag and throwing them into the sidebar as links?
I'm not sure your proficiency with php, but I'll give you and overview of what you'd probably want to do.
First, you need the HTML. I'm assuming you're running this on a page (in a page.php file or single.php file, or similar), this means that you have access to the global variable $post, which contains the html of the page in it. To access it you can use the helper function get_the_content(), this returns the html being displayed.
Next you need to parse through this to get the h2 tags. A simple regex can handle this, something like <h2[^>]*>(.*)</h2>. It's important to remember that this regex is very picky, so format your html correctly, no multiline h2s.
So now you have the html, and have parsed it with a regex to get the h2s. Now you need to generate the list from the results, and prepend it to the top of the content of the page. There are a ton of ways to do this, the easiest being just running the code in the right spot in the template file.
Of course there are probably better ways of doing this, I'd recommend you look at say a FAQ plugin (if that's what this is for), or do the lists manually (as this system can be broken), or possibly use a custom post type; but for your question, that's how I'd do it.
I have a legacy application that I needed to implement a configuration page for to change text colors, fonts, etc.
This applications output is also replicated with a PHP web application, where the fonts, colors, etc. are configured in a style sheet.
I've not worked with CSS previously.
Is there a programatic way to modify the CSS and save it without resorting to string parsing or regex?
The application is VB6, but I could write a .net tool that would do the css manipulation if that was the only way.
You don't need to edit the existing one. You could have a new one that overrides the other -- you include this one after the other in your HTML. That's what the "Cascading" means.
It looks like someone's already done a VB.NET CSS parser which is F/OSS, so you could probably adapt it to your needs if you're comfortable with the license.
http://vbcssparser.sourceforge.net/
One hack is to create a PHP script that all output is passed through, which then replaces certain parts of CSS with configurable alternatives. If you use .htaccess you can make all output go through the script.
the best way i can think of solving this problem is creating an application that will get some values ( through the URL query ) and generate the appropriate css output based on a css templates
Check this out, it uses ASP.NET and C#.
In my work with the IE control (shadocvw.dll), it has an interesting ability to let you easily manage the CSS of a page and show the effects of modified CSS on a page in realtime. I've never dealt with the details of such implementations myself, but I recommend that as a possible solution worth looking at. Seeing as pretty much everyone is on IE 6 or later nowadays, you can skip the explanations about handling those who only have IE 5,4,3 or 2 installed.
Maybe the problem's solution, which is most simple for the programmer and a user is to edit css via html form, maybe. I suppose, to create css-file, which would be "default" or "standart" for this application, and just to read it, for example, by perl script, edit in html and to write it down. Here is just the simple example.
In css-file we have string like:
border-color: #008a77;
we have to to read this string, split it up, and send to a file, which will write it down. Get something like this in Perl:
tr/ / /s;
($vari, $value) = split(/:/, _$);
# # While you read file, you can just at the time to put this into html form
echo($vari.":<input type = text name = ".$vari." value = ".$value.">");
And here it is, you've got just simple html-form-data, you just shoul overwrite your css-file with new data like this:
...
print $vari[i].": ".$value.";\n";
...
and voila - you've got programmatical way of changing css. Ofcourse, you have to make it more universal, and more close to your particular problem.
Depending on how technically oriented your CSS editors are going to be, you could do it very simply by loading the whole thing up into a TextEdit field to let them edit it - then write it back to the file.
Parsing and creating an interface for all the possibilities of CSS would be an astronomical pain. :-)