I have finished a leaflet map on codepen.
My code is splitted in html/css and javascript/jquery.
I would like to know how to display the map on a wordpress website.
I had try the embedding on codepen, but the fact there is ''Result on top left'' and ''edit on Codepen'' doesn't match my needs.
Do i have to make the code in a full html (My javascript inside </>script then )?
Is there a easy way to display it?
Thank you very much
I use the following solution, which works for Elementor too.
Yes, do use the html, yet, add your css and js files inside your
wp-content > themes > child-theme > assets > css or js folders
link these files as you would in a standard html setting, either by typing up the whole permalink or in a shortened ../wp-content/etc. link. I use the first option.
Add your html and it should work.
Tip 1: Inside your browser, inspect for any errors, because if you have any older javascript , WordPress will issue a warning.
Tip 2: If you use any images, you need to optimize the images like WordPress Media does.
Related
I created a cookie banner with some HTML, CSS and Javascript.
My question is how can I add these files within Wordpress to make the banner works on the whole site?
I know I could just use a Wordpress plugin to generate a cookie banner, but I was wondering if it was possible to integrate my code.
Thanks
These are the following methods:
You may use the plugin "Header and Footer" (This plugin have different TABS like html, CSS, JavaScript) and add your whole in this plugin. So Your code work in whole WordPress website.
First, you need to install and activate the SyntaxHighlighter Evolved plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you can go ahead and edit the blog post where you want to display the code.
Is there a way to put some custom code in the head of the page? Before Elementor you could do this by editing the header.php file of the template, but now, elementor eliminates all the code from the template, and there is no way (at least an obvious way) to do this. For me this is very important, because I like to put some tags in the code and also this is a perfect way to implement Google Analytics without using any other plugin. Google speed showing to add preload fonts because of speed. I also want to add Preload meta in header but don't want to use plugin. Please suggest better for this.
Thanks
as for google analytics the codes are javascript. you can easily add them into header using "HTML Widget" and then add the code between script tags.
and if you are looking for a way to add php codes, i recommend Dynamic.ooo. the plugin has a widget called "PHP Raw" which lets you write your php in elementor and put it anywhere you want. i myself currently use this plugin and it is a swiss army plugin!
I am using bootstrap to build a mobile web page
only one page and use some of the bootstrap css and js code but I have to hold all the css and js.
since I only use some of it I want to reduce the unused css style and js code to reduce the file size
how to do it?
I mean if I only use the modal of the bootstrap how to reduce the css of col and alert and other css I do not used?
I'm not fully sure if this question really belongs here, but there is an answer to the question.
You can use Bootstrap's site to customize which elements of bootstrap you want and do not want, downloading a file with only the bits that you would like to keep.
This is available here: https://getbootstrap.com/docs/3.4/customize/
To read about it, go to their : https://www.labnol.org/internet/remove-unused-css/28635/
Remove Unused CSS from the Stylesheet
Here’s how you can easily find all the unused selectors in your CSS files in Google Chrome:
Open any page of your website inside Google Chrome and then launch the Dev Tools available under File -> Tools -> Developers Tools.
Click the Audits tab inside Dev Tools and select the “Web Page Performance” and “Reload Page and Audit on Load” options. Now click the “Run” button to begin the CSS audit process.
On the results page, expand the “Remove Unused CSS Rules” group and select the CSS file(s) that are linked from your site. You may ignore the CSS files added by social plugins and widgets since you do not have control over them.
Here you will get a sorted list of all styles that are defined in the CSS file but not used anywhere on the current page.
You can copy and save the results in a text file and repeat the steps for couple of other pages on your site. This is essential as not all selectors may be used on all pages. You can find the count of various selectors in the combined resultset, maybe using Google Sheets, and the selectors with the highest count can probably be “safely” removed.
read more this link
Chrome DevTools has coverage tool. It identifies which code is useful and which is not. I used it to reduce my css file from ~25K lines to ~2.3k lines.
Read more here: https://developers.google.com/web/tools/chrome-devtools/coverage
I have a code generated by "highslide" software and what it does is to create an image gallery.
This code consists of .css html and javascript.
If I place the htmal code in the Joomla's "index.php" file and then the rest of the file in the root directory then the image gallery is working and is placed in every page in Joomla.
I do not want this. Is there a way of assigning that image gallery to only pages I choose?
Or is there a way to find out what is the index.php main file for that specific page I need to have the gallery and paste the code in there?
I have tried to insert the code in a custom module via the Joomla's editor but when I click on save then it compiles the code and remove certain parts of it and cannot work.
It removes the link to javascript and to css file.
Is there a way without any other third party extension to have that code into the custom module without then Joomla eliminate the half of the code?
Thank you,
Best Regards,
Andreas Achilleos
I would not add things like this to your index.php file. This is Joomla, not a static html website ;)
You have 3 options:
Option 1 would be to develop your own module and install it on your Joomla site. This option would take the longest amount of time and would require you to get your handy in a bit of coding.
Option 2 would be to firstly download, install and enable a plugin called Sourcerer. Once done, in the Joomla backend, create a new "Custom Module" and manually add your html code. After, below the big textbox, you will see a button below saying "Insert code". O modal will popup allowing you to add your custom code. Simply add your CSS and JS using the <style> and <script> tags.
Option 3 would be to use a pre-built Image Gallery extensions from the Joomla Extensions Directory. There are loads to choose from.
Hope this helps
The company I am working with hosts their webpage on Wordpress. They want me to edit some of the code in order to do various things, such as enable a photo container to be a moving slideshow.
Figuring out the javascript and html to achieve the results they desire is not problematic for me. However, I am unsure how to get full access to the Source Code of the site. I have privileged access to the backend of the site but in wordpress when you go to edit it only shows some of the basic html tags while hiding the <div> and <script> tags and code. Is there any way edit the page in its source code format? I don't want to have to go through the simplified and less expressive/less control Wordpress interface, and I don't even know if I can achieve the desired results with it.
If you try and edit individual pages you're approaching the problem in the wrong way. You probably want to be using a plugin or modifying a plug-in to create the slideshow you need. There are many plugins for wordpress that do what you seem to need.
slider-widget is one such pluging
In Wordpress, there are two main parts to the website's front and backend: the core WP files and the theme that is used. (And other important aspect to a WP site is the database, where all content is stored, including text/images entered in the admin backend.)
Core WP files are not to be changed because they get overwritten with each update. What you want to work with is the theme. Look in Appearance>>Themes and see what the active theme is for the site. It will also tell you the name of the folder the theme files are in.
With FTP, go to root/wp-content/themes/your-theme-name. That's the php, html and css source of the displayed part of the site. Uploaded images are in /uploads/, and plugins in /plugins/.
See http://codex.wordpress.org/Theme_Development to get an idea of how themes are built and how to modify them.
See the rest of the docs at WP to see how to work with plugins, add other javascript correctly so it doesn't conflict with WP's included javascripts, etc. All the docs you really need are at wordpress.org