The "No Dev Question is Stupid" Thread - Basic HTML / CSS / Etc.

Cash Builder said:
I am trying to run Ahrefs site audit on my Wordpress site, but the crawl fails every time. Ahrefs support says it is because their bot encounters a captcha on my site which prevents them from crawling.

My web host says that they are not blocking any bots, and according to their logs Ahrefs bot is landing on my site fine.

I also noticed that when I put my site into Ahrefs site explorer instead of showing my site's title, it just says Captcha.

I have tried deactivating plugins but it's still not working.

Any ideas on what could be causing this?
Click to expand...
I'm no expert on this but my initial thought is that the issue could be related to using a CDN
 
Magister said:
I got a low pingdom result on posts with a lot of comments.

"Remove query strings from static resources" and it seems that gravatars are the problem. I managed to solve other page speed problems with plugins but not this one. Is there any code that can help me?
Click to expand...

The reason they don't want you to have query strings is because those don't get cached by the browser or CDN.

That's a good thing to know if you're using all kinds of layers of caching and trying to make a minor CSS change, for example. Having a query string like style.css?v=1.03 and incrementing it to style.css?v=1.04 helps you push the updates without having to flush the caches each time you test something.

The query strings on Gravatar avatars usually refer to which size you're pulling in, the rating like Rated R or Rated G, and sometimes whether or not it's a default avatar or a custom one.

You CAN remove all of that, but you're going to end up getting a lot of default avatars showing at possibly the wrong size. You'll get default because you can't request a minimum rating, so they'll only send you G ratings, and otherwise you get the default blue one. And you'll end up getting their default 80px one, which may not be the optimal size for your site.

If that sounds okay to you then you can use this, which I found online and didn't write myself:

PHP: 
/**
 * Remove query string parameters from Gravatars
 */
add_filter( 'get_avatar_url', 'buso_avatar_remove_querystring' );
function buso_avatar_remove_querystring( $url ) {
    $url_parts = explode( '?', $url );
    return $url_parts[0];
}

But, i'd also tell you that the recommendation to remove query strings is only that. If Gravatar isn't being slow, then there's nothing to worry about. Each blog is likely to have comments from different users, and most visitors never visit more than one post at a time anyways.

If you care about the speed grade, then you could remove the query strings. If you care about the speed score, then I wouldn't worry if your score isn't slow. If you really care, I'd remove the gravatars altogether rather than just the query strings.
 
Suggestions for WP plugins to go from feed (xml) to an "amazon style" product slider?

Automatically or semi-automatic.

WP All Import to do the feed processing?

Custom Posts plugin to store products?

Which plugin to present it as a carousel?

^ I want to do an automatic "deals" import from a feed and present it on landing pages and probably some faceted search stand alone page.

Woocommerce?

Custom posts?
 
Last edited:
I've got an issue with background-image on mobile as backdrop for some h2 headings.

At first the image wasn't scaling properly so I did a background-size: 100% which solved the issue.

The second issue which I've still not solved is I can't get the image to add any amount of height which has caused the h2 to overlap the image or go outside of the boundaries of the background image.

I thought ok that's cool I'll just change the color property so it's visible in black instead of white when it's outside of the boundaries of the background image on smaller devices but for whatever reason - don't ask me why - any new media query I add isn't actually working (it's applying to desktop as well).

Done media queries many times, it's just freaking odd.

Could this be because of a caching plugin or anything like that? Usually, CSS updates are visible without clearing the cache on this site.

I'm thinking it's just some kind of bug with my theme or something like that, god knows the number of updates that have gone by since I last added CSS to the site.

Any ideas?
 
RomesFall said:
I've got an issue with background-image on mobile as backdrop for some h2 headings.

At first the image wasn't scaling properly so I did a background-size: 100% which solved the issue.

The second issue which I've still not solved is I can't get the image to add any amount of height which has caused the h2 to overlap the image or go outside of the boundaries of the background image.

I thought ok that's cool I'll just change the color property so it's visible in black instead of white when it's outside of the boundaries of the background image on smaller devices but for whatever reason - don't ask me why - any new media query I add isn't actually working (it's applying to desktop as well).

Done media queries many times, it's just freaking odd.

Could this be because of a caching plugin or anything like that? Usually, CSS updates are visible without clearing the cache on this site.

I'm thinking it's just some kind of bug with my theme or something like that, god knows the number of updates that have gone by since I last added CSS to the site.

Any ideas?
Click to expand...

It's possible you jumbled up where your rules lie within the cascade. In the example below, the h2 color is defined for all styles then after it is defined in the media query. If you were to switch the order and put the media query rule above the overall rule, the general rule would override it in the "cascade".

Code: 
h2{
  background-image: url("https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg);
  background-size: 100%;
  height:200px;
  color:#000;
  }
  @media (max-width: 768px) {
  h2{color:#fff;}

}

You can resize the window to see the media query in action:
Code: 
http://jsfiddle.net/tya6cokn/1/
 
I have a pretty dumb question--hopefully this is the thread for it.

The WP editor is made to encapsulate new lines in paragraphs (<p>).

So when you press enter for a new line, it won't show you the <p>, even in the HTML tab, but it'll output it. You can get around this by holding Shift+Enter, in which case it'll produce a <br> instead.

OK, so far so good.

In my listicles, I've setup my formatting in a way that entire "sections" are one big list item (<li>), to get the perfect list setup and get those list snippets in the serps. Like WikiHow et al. (https://www.wikihow.com/Jump)

My problem is, working with paragraphs in this environment is a PITA because WP doesn't appear to be setup for this.

So in a list item, when pressing Enter, it creates a new list item (<li>item1</li><li>item2</li>) and that makes perfect sense, but there doesn't seem to be anything to make my life easier, or at least I can't find it. Maybe I'm not asking the right question.

Is there any trick to being able to easliy make new paragraphs by pressing enter inside the editor? Maybe some js of some sort so that I can hold down a key while pressing enter, or something?

Right now I'm manually adding <p> and </p> to each line.

Man, this sure is lame... sry gais
 
jäger said:
I have a pretty dumb question--hopefully this is the thread for it.

The WP editor is made to encapsulate new lines in paragraphs (<p>).

So when you press enter for a new line, it won't show you the <p>, even in the HTML tab, but it'll output it. You can get around this by holding Shift+Enter, in which case it'll produce a <br> instead.

OK, so far so good.

In my listicles, I've setup my formatting in a way that entire "sections" are one big list item (<li>), to get the perfect list setup and get those list snippets in the serps. Like WikiHow et al. (https://www.wikihow.com/Jump)

My problem is, working with paragraphs in this environment is a PITA because WP doesn't appear to be setup for this.

So in a list item, when pressing Enter, it creates a new list item (<li>item1</li><li>item2</li>) and that makes perfect sense, but there doesn't seem to be anything to make my life easier, or at least I can't find it. Maybe I'm not asking the right question.

Is there any trick to being able to easliy make new paragraphs by pressing enter inside the editor? Maybe some js of some sort so that I can hold down a key while pressing enter, or something?

Right now I'm manually adding <p> and </p> to each line.

Man, this sure is lame... sry gais
Click to expand...

There is a filter called wp_autop you can use to shut off the feature entirely - I haven't seen the list behavior you described before but I would bet it's caused by the wp_autop filter.

RomesFall said:
I've got an issue with background-image on mobile as backdrop for some h2 headings.

At first the image wasn't scaling properly so I did a background-size: 100% which solved the issue.

The second issue which I've still not solved is I can't get the image to add any amount of height which has caused the h2 to overlap the image or go outside of the boundaries of the background image.
Click to expand...

Not a direct solution but check out background-size: cover; - it will scale the width AND height to ensure the background covers the whole element, albeit with some of the image cut off.

I agree the second issue points to a stylesheet issue - https://jigsaw.w3.org/css-validator/ can help with large stylesheets
 
Are you for or against using shadows for text boxes and images in your articles? Text boxes like "Facts about widgets".
 
I'm trying to import a tab delimited csv file and I'm getting the following on the first line which is breaking my import:

nhJaTJC.png


Any idea why these characters are appearing and how to get rid of them (PHP).

To answer my own question above, this seemed to work:
http://hollsk.co.uk/posts/view/ascii-to-utf-8-from-csv
 
I've got a question about linking posts to other custom posts (in Wordpress). I have a custom post type that is basically a database/directory of products. Now if I write a normal post (a guide, a news update), is there some way to link that to a specific product?

The only solution I found so far is to create a tag with the name of each product, and then use that to show 'latest news/guides' on the product page. Is there a more elegant solution?
 
Are there any particular lightbox / image viewers people can recommend? I find many to be a bit bloated and heavy, and I don't really want to use a Wordpress plugin for it either.
 
Anyone recommend a good resource for learning Google Data Studio?
I want to do some stuff like make numbers flash for a few seconds if the underlying data changes or even play a sound if a condition happens.
 
Is it possible to get total pageviews across multiple properties in Analytics?
 
Is Google's data studio worth investing time in. Do people use it on any regular basis and what for?

Replies appreciated. I recently had a situation where a site was dying slowly and wanted to tag, categorise the types of pages that were losing traffic and at what pace. Would data studio have been useful for this and perhaps also presenting the findings to the tech illiterate?
 
Yes, it's pretty good. You can event connect an SQL DB, so if you dump data into SQL, you can make a "control panel" in there.
 
Stones said:
Is Google's data studio worth investing time in. Do people use it on any regular basis and what for?

Replies appreciated. I recently had a situation where a site was dying slowly and wanted to tag, categorise the types of pages that were losing traffic and at what pace. Would data studio have been useful for this and perhaps also presenting the findings to the tech illiterate?
Click to expand...

Yes, Google Data Studio is great, but it's really more of an overview sort of thing. I would think Google Analytics is more suited for what you want.
 
What would you recommend to dynamically daily generate a chart and save it as a file?
I considered Python and Chartify, Google Sheets with Google App Script.
 
bernard said:
What would you recommend to dynamically daily generate a chart and save it as a file?
I considered Python and Chartify, Google Sheets with Google App Script.
Click to expand...

I (personally) would write a python script to generate jupyter notebooks. You'll be able to pull in data from different sources, mash them all up, then output fancy interactive charts into multiple formats (pdf/html/whatever), with the possibility of automating them to whever degree you require
 
Really stupid questio any guide on how to easily change to https with wordpress already in place?
 
darkzerothree said:
This reminds me I have to check my caching.

Really stupid questio any guide on how to easily change to https with wordpress already in place?
Click to expand...

I used the Really Simple SSL plugin on my last site to switch to https - https://en-gb.wordpress.org/plugins/really-simple-ssl/

If you don't want to use a plugin I'm sure most web hosts will do this for you. There are loads of guides online if you do a search, just make sure you note down every step before you start so you don't miss anything.
 
darkzerothree said:
This reminds me I have to check my caching.

Really stupid questio any guide on how to easily change to https with wordpress already in place?
Click to expand...

For a theme you installed, you technically should only need to change your address in the Settings > General to https, and then do a database search and replace to change http://yourdomain to https://yourdomain. This will run through your posts and change internal links and image sources and in the Menu's to the right protocol.

For a theme you built, if you didn't use relative URLs then you'll have to change any hardcoded mentions in your templates and CSS / JS files.

Otherwise, a plugin is going to be filtering the output of every post and slowing it down. It's a negligent amount for one post, but if you have a lot of posts or a lot of caching processing, it can add up. It takes about the same amount of time to do it right as it does to rely on a plugin.
 
Healthline and a lot of other sites are using jumplinks to page sections.

I've implemented table of contents plugins over the years to get these jump links showing in the serps, admittedly less so since Feb / March.

Is there a simple way to implement the URL change as the section (ID) is scrolled through. I'm guessing it's some simple JavaScript.
 
Stones said:
Healthline and a lot of other sites are using jumplinks to page sections.

I've implemented table of contents plugins over the years to get these jump links showing in the serps, admittedly less so since Feb / March.

Is there a simple way to implement the URL change as the section (ID) is scrolled through. I'm guessing it's some simple JavaScript.
Click to expand...

@CCarter wrote some code to get this done in this thread (his 2nd post): jQuery: Title Change to Header Text on Scroll
 
Recommendation for a sticky/floating sidebar for Wordpress, that does not use the standard sidebar widgets?

I want to keep my no sidebar, centered for reading, template (ReHub theme), but I want to add a floating sidebar to have a Facebook like box.
 
We migrated to Jotforms (not my choice) and these forms are stupid large and are slowing things down. 300KB and 6 server calls for a simple contact form.

As much as I want to use something else I can't, again not my choice. I would like the form to delay loading until after the dom is complete.

This is the code jotform provides:
Code: 
<script type="text/javascript" src="https://form.jotform.com/jsform/1111111111"></script>

I tried this and it doesn't work:
Code: 
<script defer src="text/javascript" src="https://form.jotform.com/jsform/1111111111"></script>

This is for Wordpress sites and the form is on every page of the site.
 
You must log in or register to reply here.
Back