How to add a script to one wordpress category?

Question

code review

I want to display script json ld in header in wordpress category via function.php. That is, each category has its own script. Please help.
Something similar, but maybe with errors:

function javascript() {
  if ( is_category( 54 ) ) { 
    ?>
        <script>тут бла бла бла</script>
    <?php
  }
}
add_action('wp_head', 'javascript');

Answer 1

Visually, it looks quite decent and there are almost no obvious jambs, but if you dig deeper, questions arise.
There are a number of complaints about the use of graphics. Some of them, of course, belong to the designer’s jambs, but you didn’t work out in the best way either.
Of the most noticeable - the title picture with a car in PNG, which takes almost 600kb and because of this it loads very, very slowly (and noticeable to the user). In general, this is mostly the fault of the designer, who did not make an effort to choose the right graphics (the car was obviously shot on the street and the reflections in the windows make a significant contribution to visual noise and, as a result, to the size of the picture, it was necessary to choose a photo taken in a special room). In addition, the designer obviously did not hear aboutrequirements for a taxi in New York and drew as it comes into his head, but let's leave it to his conscience. The combination of the background image, on which all the traffic goes in the opposite direction and makes the taxi car violating the rules of the road, is also on the conscience of the designer.
However, in this case, and even more so in the case of background images down the page, you make mistakes with the choice of file formats, ways to insert them into the page and optimization. For example, from a picture with a car, you can squeeze out almost 100kb simply by using optimizers. Much sadder is the situation with background pictures below in the text. Firstly, you save photos in PNG, resulting in files per megabyte, although they would take 5-10 times faster in JPEG. Secondly, you most likely saved the background images already processed (darkened). I have not seen the layout, but I will assume that these pictures are there in their original form and some filters are applied to them. At first glance it seems that there is no problem, but in practice (in the case of layout for a real site), you force the person who will maintain the site to either prepare pictures with the same post-processing or put up with the fact that the style of the site changes. The correct solution here is to load images as they are and implement filters in CSS, especially since here this is done elementarily through multi background or a pseudo-class with a translucent background. It is also obvious that for such dark pictures it is quite possible to use JPEG with lower quality and thereby significantly save traffic for users.
Another problem associated with background images is that you don't put a solid color close to them under them. Try enabling "Network throttling" in dev.tools, disable the cache and reload your page - I think you will understand what I mean - white blocks with white text stay for quite a long time, gradually filling up with rather dark pictures. If it background-colorwere black under them, there would be no problem.
Next is the logo. Usually logos are developed separately and even if it looksJust typed font - it does not mean that it is not. The Google, Microsoft or Yandex logo is also just a name, but I hope you don't make them up by writing the inscription in text? In general, a logo = a picture, preferably in a vector. Now even one move of the slogan one pixel to the left relative to the name already destroys the entire design of the logo.
Pay attention to how you work with forms. All fields in the form are <input type="text">, although some of the names clearly hint at date / time selectors, and "Choose Vehicle" hints at a select list.
I would like to note the work with icons - it is still better to store them in SVG and either demand from the designer or pick them up on the same Icon Finder. At the same time, the design (those notorious yellow circles) is best done through CSS. this gives you much more flexibility in working with element sizes.
There are all sorts of shortcomings regarding responsiveness, for example, attention to how the "Our Tariffs" block is displayed in a size of just over 600px, in particular, the tariff name and description.
Please note that you are using two different menus for the desktop and mobile views. In general, in your case, the menu is quite simple and you could do with one. Of course, two copies are often used, but this solution has its drawbacks (in particular, the lack of state synchronization), so you must make an informed decision on such issues. In addition, inline onclick handlers can be explicitly replaced there with an elementary one.

document.querySelectorAll('.menu a, .menu-hover a').addEventListener()

which will obviously make the code simpler and more maintainable.
Another important point that is often omitted during layout is the behavior of the layout with real data. The fact that the designer stuffed lorem ipsum everywhere in the layout and texts of approximately the same size does not mean that these conditions will be observed on a real site. The lack of skill to check the behavior of the layout in changing conditions leads to many errors that are not visible in the conditions of synthetic data. For example, try in the block "We Do Best Than You Wish" (let's leave claims about the English language aside) in any of the elements it's trite to increase the amount of text by 2-3 times. In Chrome this only breaks the grid, in Firefox it also changes the icon size. In doing so, I assume that Firefox is behaving correctly. the proportions of the elements have changed, and you have not set size limits for images.
In general, it seems that the layout was made up and checked only in Chrome. For example, see how a picture with a hand and a phone behaves in Firefox when resized. Again, Firefox is quite correct. you didn't crop the image correctly, preferring to unload "as is" and adjust the position in CSS, but forgetting about overflow: hiddenthe container.
Now on to the CSS:
Pay attention to how you include the external font:

family=Lato:400,700,700i,900,900i&subset=latin-ext

. Two questions arise:
In addition, you constantly forget about fallback fonts, which on a slow Internet and in the absence of instructions for font loading leads to invisible page content for the loading period.
Lack of a width limit for .wrapperwill result in an unacceptably wide site on large, high resolution monitors. You can scale the page down to 50% and admire the result.
Styles throughout use fairly generic class names in the global namespace. For example, who would have thought that the selector styles.text? Are you sure that such a selector will not be found anywhere else on the site? Even with the further development of the site? In other words, naming selectors is an important part of the job, you can use any methodology (the same BEM or something else) or develop your own, but your code should not break when adding a couple more blocks, especially if it is done by another person.
Lists of elements, for example, the same one, it is .product-contbetter to do it with lists, and not manually shove the elements into columns, since flexbox and column layout will do everything perfectly for you, but having a peer-to-peer list, you will provide yourself with much more freedom of action.
Using id as a CSS selector is bad practice, but you have quite a few places like that, 11 of them.
I'm sure that I could find something else, but I hope it's enough for the seed, and so much happened ... :)

Answer 2

Loading time 4sec, image size 3.6mb. You need a maximum of 1.5sec and .5mb.
Make lazy loading images.
On the mobile version, when scrolling up, it was not bad to show the hamburger menu, but on the desktop everything is fine, but on the mobile without a menu. It does not need to be shown always, eating up space, namely when scrolling up.
I didn’t even look at the insides, a lot of things have already been said above, I didn’t even read it.