I am trying to use css and js in a wordpress plugin I developed. I looked into the codex and I know I have to use wp_enqueue_script to add js, and wp_enqueue_style to add css with plugins_url to output the correct path, but I can't figure out how to do it. I have a file structure so that it's the plugin then plugin > css and plugin > js where css and js are folders that contain their respective files.
I tried doing:
function my_scripts_method() {
wp_enqueue_script('js/tabpane.js');
wp_enqueue_script('local/helptip.js');
wp_enqueue_script('local/webfxapi.js');
wp_enqueue_script('local/webfxlayout.js');
}
add_action('wp_enqueue_scripts', 'my_scripts_method'); // For use on the Front end (ie. Theme)
but it's not working at all, and the codex isn't of much more help. Could anyone let me know what I'm missing?
When adding files to backend plugins you need to do a few things within your code:
add_action('init', 'add_main_javascript');
function add_main_javascript(){
$slug = "main";
$file = "inc/js/$slug.js";
include_js_files($file, $slug);
}
function include_js_files($file, $slug, $in_footer = NULL){
if(!$file)
$file = "inc/js/filename.js";
$your_plugin_dir = plugin_dir_path(__FILE__);
$your_plugin_url = plugin_dir_url(__FILE__);
if(file_exists($your_plugin_dir.$file))
// array('jquery') is the scope of the javascript
// Set $in_footer to true if you need the js to be in the footer
wp_enqueue_script("filename.js", $your_plugin_url.$file, array ( 'jquery' ), "", $in_footer);
}
Or you could use just the add_action('init', 'your_code_for_enqueue');
Related
When I use nuxt to develop my project, I find some problems.
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa, ..... code was too larger
can I remove it or use js file to replace it?
I have found a relatively perfect solution. I will share it with you here. You can also take a look at the website I developed using NUXT Sample Website
The key is the hook function vue-renderer:ssr:context, you can set the context.nuxt = null to remove any data in window._NUXT_.
But it is not work well, you have to add serverRender and routePath to window.nuxt
// nuxt.config.js
{
...,
hooks: {
'vue-renderer:ssr:context'(context) {
const routePath = JSON.stringify(context.nuxt.routePath);
context.nuxt = {serverRendered: true, routePath};
}
}
}
You can see the result at my site
I am using a photo gallery component in my project. It requires a path to the folder containing the images. I am unable to find a way to do this. I have created an img directory inside of assets, and I'm using the standard Vue CLI 3 scaffolding. I'm able to use a require('path/to/file/name.png'), but what I need is to be able to bring the whole folder in. I'm unable to figure out a way to do this. I even tried placing the images in a folder inside of public, but no luck.
My structure looks like this:
project/public/img
project/src/assets/img/
project/src/components/
I need to get the project/src/assets/img path into a component inside of project/src/components/componentName.vue.
I should also mention that I want to be able to access this directory from the script tag, not the template tag.
You can try something like this:
const requireModule = require.context('../assets/img.',false,/\.png$/)
const images = {}
requireModule.keys().forEach(filename =>
{
const imageName = fileName.replace(/(\.\/|\.png)/g, '');
images[imageName] = requireModule(fileName)
OR
images[imageName] =
{
namespaced: true,
...requireModule(fileName)
}
});
export default images;
Then you can import this file
import photos from 'imagesObject.js'
for (let key in photos) // do whatever you want with the image
Thank you for your answer IVO. That solution did work, but I found another that I wanted to share here for anyone else having a similar problem. The issue I was having was incorrectly referencing the public folder using a relative path instead of BASE_URL. Based on this...
The public Folder Vue CLI Documentation
I created a directory inside of /public then referenced it using process.env.BASE_URL. This solved the problem. Here are the relevant snippets:
Javascript:
data () {
return {
thumbnailDir : process.env.BASE_URL + 'portfolio/'
}
Template:
<transition-group name="thumbnailfade" tag="div">
<img v-for="thumb in filteredImages"
:key="thumb.id"
#click="showLightbox(thumb.name)"
:src="thumbnailDir + thumb.name"
:alt="thumb.alt"
:title="thumb.alt"/>
</transition-group>
<lightbox id="mylightbox"
ref="lightbox"
:images="images"
:directory="thumbnailDir"
:filter="galleryFilter"
:timeoutDuration="5000"
/>
I was recently asked to change a script that is on this shopify website but I am unable to find it in either the backend settings or the actual code for the template. Could someone please point me in the right direction on how to change the code for this script? The pixel values are wrong here and it's causing SEO issues:
<script>
//<![CDATA[
(function() {
function asyncLoad() {
var urls = ["\/\/productreviews.shopifycdn.com\/assets\/v4\/spr.js?shop=myshop.myshopify.com","\/\/www.beetailer.com\/javascripts\/beecart.js?shop=myshop.myshopify.com","https:\/\/media.conversio.com\/scripts\/shopify.js?shop=myshop.myshopify.com","https:\/\/s3.amazonaws.com\/lastsecondcoupon\/js\/freeshippingbar.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/tracking_pixels\/123.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/conversion_pixels\/123.js?shop=myshop.myshopify.com","\/\/notifyapp.io\/js\/1463319629\/loader.js?shop=myshop.myshopify.com","https:\/\/embed.tawk.to\/widget-script\/58065fec304e8e75855e4cce\/default.js?shop=myshop.myshopify.com","https:\/\/www.affiliatly.com\/shopify\/shopify.js?affiliatly_code=AF-10200\u0026shop=myshop.myshopify.com"];
for (var i = 0; i < urls.length; i++) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = urls[i];
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
}
window.attachEvent ? window.attachEvent('onload', asyncLoad) : window.addEventListener('load', asyncLoad, false);
})();
//]]>
</script>
This code is included by Shopify as a part of the {{ content_for_header }} Liquid variable in the layout files (e.g. theme.liquid.)
The JavaScript files would be ScriptTag scripts that have been added to the store by Shopify apps that you have installed. For example https://productreviews.shopifycdn.com/assets/v4/spr.js belongs to the Product Reviews app.
These scripts are hosted by the app developers so you won't be able to edit them directly. You can remove a ScriptTag script by uninstalling the Shopify app that placed it there.
It looks like the function above is loading the java script (.js files) dynamically in the code and adding the script to the domain:
var urls = ["\/\/productreviews.shopifycdn.com\/asse....
You would need to download the .js files (url are listed in the code), modify them, and change the path so that the above function can load them from a local path.
Following array is URL to all the JS scripts... Each of the item in this array is loaded after page loads.
var urls = ["\/\/productreviews.shopifycdn.com\/assets\/v4\/spr.js?shop=myshop.myshopify.com","\/\/www.beetailer.com\/javascripts\/beecart.js?shop=myshop.myshopify.com","https:\/\/media.conversio.com\/scripts\/shopify.js?shop=myshop.myshopify.com","https:\/\/s3.amazonaws.com\/lastsecondcoupon\/js\/freeshippingbar.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/tracking_pixels\/123.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/conversion_pixels\/123.js?shop=myshop.myshopify.com","\/\/notifyapp.io\/js\/1463319629\/loader.js?shop=myshop.myshopify.com","https:\/\/embed.tawk.to\/widget-script\/58065fec304e8e75855e4cce\/default.js?shop=myshop.myshopify.com","https:\/\/www.affiliatly.com\/shopify\/shopify.js?affiliatly_code=AF-10200\u0026shop=myshop.myshopify.com"];
I'm running into the following problem with requirejs and usemin:
I want to setup a multipage application, where I dynamically load modules that only contain page specific functionality (e.g. about -> about.js, home -> home.js). I could go ahead and pack everything in a single file, but that just leads to a bigger file size and overhead on functionality that isn't necessary on each site! (e.g. why would I need to load a carousel plugin on a page that doesn't have a carousel!)
I checked out the example https://github.com/requirejs/example-multipage-shim
That is in fact a great way to deal with it, until I bring usemin into the game. After revving the filenames the src path of each script tag is updated, but what about the dependencies?
<script src="scripts/vendor/1cdhj2.require.js"></script>
<script type="text/javascript">
require(['scripts/common'], function (common) {
require(['app'], function(App) {
App.initialize();
});
});
</script>
In that case, require.js got replaced by the revved file 1cdhj2.require.js. Great!
But the required modules "common" and "app" no longer work since common became 4jsh3b.common.js and app became 23jda3.app.js!
What can I do about this? Thanks for your help!
(Also using Yeoman, btw)
It's a tricky problem and I'm sure somebody else fixed in in a more elegant way, but the following works for me.
I might publish this as a grunt plugin once it's a little more robust.
Taken from my Gruntfile:
"regex-replace": {
rjsmodules: { // we'll build on this configuration later, inside the 'userevd-rjsmodules' task
src: ['build/**/*.js'],
actions: []
}
},
grunt.registerTask('userevd-rjsmodules', 'Make sure RequireJS modules are loaded by their revved module name', function() {
// scheduled search n replace actions
var actions = grunt.config("regex-replace").rjsmodules.actions;
// action object
var o = {
search: '',
replace: '', //<%= grunt.filerev.summary["build/js/app/detailsController.js"] %>
flags: 'g'
};
// read the requirejs config and look for optimized modules
var modules = grunt.config("requirejs.compile.options.modules");
var baseDir = grunt.config("requirejs.compile.options.dir");
var i, mod;
for (i in modules) {
mod = modules[i].name;
revvedMod = grunt.filerev.summary[baseDir + "/" + mod + ".js"];
revvedMod = revvedMod.replace('.js', '').replace(baseDir+'/','');
o.name = mod;
o.search = "'"+mod+"'";
// use the moduleid, and the grunt.filerev.summary object to find the revved file on disk
o.replace = "'"+revvedMod+"'";
// update the require(["xxx/yyy"]) declarations by scheduling a search/replace action
actions.push(o);
}
grunt.config.set('regex-replace.rjsmodules.actions', actions);
grunt.log.writeln('%j', grunt.config("regex-replace.rjsmodules"));
grunt.task.run("regex-replace:rjsmodules");
}),
You can also use requirejs' map config to specify a mapping between your original module and your revved one.
Filerev outputs a summary object containing a mapping of all the modules that were versioned and their original names. Use grunt file write feature to write a file in AMD way with the contents being the summary object:
// Default task(s).
grunt.registerTask('default', ['uglify', 'filerev', 'writeSummary']);
grunt.registerTask('writeSummary', 'Writes the summary output of filerev task to a file', function() {
grunt.file.write('filerevSummary.js', 'define([], function(){ return ' + JSON.stringify(grunt.filerev.summary) + '; })');
})
and use this file in your require config so that the new revved modules are used instead of old ones:
require(['../filerevSummary'], function(fileRev) {
var filerevMap = {};
for (var key in fileRev) {
var moduleID = key.split('/').pop().replace('.js', '');
var revvedModule = '../' + fileRev[key].replace('.js', '');
filerevMap[moduleID] = revvedModule;
}
require.config({
map: {
'*': filerevMap
}
});
The filerevMap object that I created above is specific to my folder structure. You can tweak it as per yours. It just loops through the filerev summary and makes sure the keys are modified as per your module names and values as per your folder structure.
"EXPORTED_SYMBOLS is not an array" Exception flagged when tried to use Components.utils.import("chrome://app/content/app1.js");.
I have a XUL application created and from one of the JS File(say app.js) I tried to include the other JS File as shown above.
Both app.js and app1.js are placed in content folder and also in chrome.manifest file following line is added
"content app content/"
In other JS File (app1.js), I have exported symbols like
var EXPORTED_SYMBOLS = ["Fooinstance"];
var Fooinstance = {
foo: function() {
...
}
}
In app.js,
Components.utils.import("chrome://app/content/app1.js");
// Error: chrome://app/content/app1.js - EXPORTED_SYMBOLS is not an array
...
Fooinstance.foo();
I am running this XUL app on XULRunner 17.0.1 win32 libraries.
I looked through the code in this link https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Using
It did not help and if I include it as resource it works however I do not want to include it as part of resource.
Could you someone point out what mistake would be ?
I had this same problem, and I solved it:
1) changing the file extension (.js) by .jsm
2) Adding a first line on your module exporting classes to share. EG:
var EXPORTED_SYMBOLS = ["Xobject"];
function Xobject(){
}
Xobject.prototype.stop = function() {
return 'stop';
}
Xobject.prototype.run = function() {
return 'running';
}
3) Calling this way
Components.utils.import('resource://gre/modules/Services.jsm' );
Components.utils.import("chrome://myFirstAddOn/content/Xobject.jsm");
var myXobject = new Xobject();
alert(myXobject.run());
Hope it help u
For anyone else getting this, another possible reason is a circular dependency. My case was a little different, but I had two JSM files each using Components.utils.import to import each other. Then I got this error in one of them.