I am working on adding a small one-page AngularJS application to my friend's Wordpress site. The application will take some user input and generate on-screen output using that input. It will also log the user input for analysis purposes.
I will need to be able to host the files for that page on my friend's site as well as create a back-end script that can capture the user input and store it to a MySQL database.
I have worked with WordPress sites before but have never customized them or written a plugin. How would you go about making this happen?
I will select the answer that leads me down the most efficient / effective path. Thanks!
After poking around for a while, I ran across the Advanced Custom Fields plugin. Using this helped me add custom JavaScript to the specific page that needed Angular support.
Here is information on how to use ACF to add JavaScript support:
https://www.godaddy.com/garage/3-ways-to-insert-javascript-into-wordpress-pages-or-posts/
Here is the plugin itself:
https://wordpress.org/plugins/advanced-custom-fields/
Related
I saw a lot of option in order to create share interaction with users:
Web share API: https://www.w3.org/TR/web-share/#sharedata-dictionary
It seems compatible with Progressive-Web-App, but it's not well supported by firefox (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#browser_compatibility)
Simple Sharer: https://reactjsexample.com/a-javascript-framework-to-share-url-to-social-media-sites-like-facebook-twitter-reddit-whastapp/
If I understood well, it doesn't work for mobile, am I right?
react-share: https://reactjsexample.com/social-media-share-buttons-and-share-counts-for-react/
Seems to work on every browser, but I don't know if it's PWA-friendly. Seems to be the best option, but I'm not sure... The last update was 1 year ago (https://www.npmjs.com/package/react-share) so maybe it will not be maintained through times...
What do you use for your app? What do you recommand?
Do you know better alternatives?
My need for the App is to share URL through social media or mail/text or ??? etc. No file in theory. And I'd like to have adapted preview on social media when the user share something.
I have used react-share personally and it was unable to open some of the apps in mobile like whatsapp, etc.
The workaround is deep-links.
if user is using a smartphone or a tablet (we can easily get this using navigator.userAgent) then you can use the app based deep-links otherwise the traditional way in which you can redirect user to a new web page.
Some of the examples:
Whatsapp: https://faq.whatsapp.com/563219570998715/?locale=en_US
Instagram: Answer is already given here
NOTE: deep-link works if the user has installed the application on desktop as well (never tried for macOS but for windows and ubuntu it works)
After edit:
You can use emailto: in href while writing <a .../>.
example:
Share this link
For more reference about mailto please visit this MDN doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href
I could not think of a better title, Please suggest one.
I am planning to work on a large web application. It will take time to load the full application before application starts functioning.
Suppose its something like asana.com. If you have a link to the task and you open the link. It loads the application first and then shows the detail of the task.
Note: I have added another example in update 2
I want to do just the opposite. Suppose if I try to open the link directly. It should show me the tasks details first and then load the whole application in background.
What development strategy should I follow to implement such feature. Will angular be good for this? I have worked with angular for small projects and am capable of think in angular :)
I just wanted to be pointed in right direction.
Update 1:
I am using Apache2 PHP5 in backing as ReST API. I am thinking to change to GoLang http server. But that does not matter in this context :)
Update 2:
I have not yet started working on the application, but I know that its size is going to be big and its going to take time to load the application. This will be a javascript application, all the communication to web will be done mostly by API. APIs will be fast and it wont be slowing down the application. My main concern is the javascript library and the approach to the issue that I want to display the content of the page before the application is loaded and load the application in background.
As second example: https://chrome.google.com/webstore/detail/a-journey-through-middle/gjgkjeheegjnnmheaflhdocglkiegoni?utm_source=chrome-ntp-icon
If you open this link in chrome, it will load the application and then load the specific content in a popup. I want to load the content of the popup first and then load the application in background. How should I write my application to achieve that.
My suggestion (and I say this as I start to do similar vs. having proven it successful) would be to make some level of framework fairly static so that users get an almost instant response to the site loaded and then start the angular app with something like this
angular.bootstrap(document.getElementById("container"), ["app"])
Ref for the api - https://docs.angularjs.org/api/ng/function/angular.bootstrap
Ref for a demonstration of this - https://egghead.io/lessons/angularjs-angular-bootstrap-app-init
My expectation then is that you will be able to
Load your static elements quickly (which will just have placeholders for your content/material)
Access the data you want in the order you want to get it to present on the screen
Release any other part of the app you need to chrome it up/decorate or populate side items.
I have a LocomotiveCMS site up and running on Heroku. I can edit my templates locally and push using Wagon. It works great!
However, I'd like to be able to serve a separate set of views for mobile devices (phones really) vs desktop/tablet. Can it be done easily? Will it require large modifications to the engine?
EDIT: I should add that I have done this before for a basic Rails app with no issues. I know how to detect a mobile device by examining the user agent and creating a separate folder (such as views_mobile) to store the mobile views. Would like to be able to do the same for LocomotiveCMS
That's a tough question. For the next version of LocomotiveCMS (v3), we'll use a full stack of middleware so that it will be easy to add your own custom behaviors.
But, for the current version of the engine, it's not that easy. However, I'm thinking about something. Perhaps you could create a Route constraint for the mobile detection (http://guides.rubyonrails.org/routing.html#advanced-constraints).
Then, you would modify your routes.rb by adding this:
match '*path' => 'locomotive/public/pages#show', page_path: 'mobile-index', constraint: MobileContraint.new
Never tested so it might not work :-) Happy patching!
Didier
I am trying to set up a multilingual site using wordpress. I went through http://codex.wordpress.org/Multilingual_WordPress#Plugins_that_direct_you_to_external_translation_services and decided to use this option Plugins like Multisite Language Switcher and the newcomer Multilingual Press link together separate WordPress network (multisite) installations for each language by pinging back and forth..
Now i installed the Multilingual press and set up a network. The url of my site was wordpress.private.net and next on is it.wordpress.private.net. Both the domains are served from same folder. But still when i visit the it.__ site it shows in english language and that too without all the posts.
I get this error on network dashboard
You didn't setup any blog relationships! You have to setup them first to use Multilingual Press. For this, go to Network » Sites » and choose a blog to edit. Then go to the tab "Multilingiual Press" and set up the relationships.
But there is no option to set up the relationships in the tab "Multilingiual Press. Please guide me where am i going wrong?
Any other way to set up is also welcome.
My main moto is to run my wordpress site in two languages
I'm also developing a website in two languages.
I haven't used what you are using, so I cannot help you in that regard.
For my project I installed qTranslate plugin and I haven't had any problems with it so far.
In the plugin settings you specify language you want to use and other settings like how the language will appear in URL (?lang=en , /en/ in front of URL , http://en.yoursite.com)
When you edit post or page, you will have additional tab in the editor, one for each language, so it is really easy to use it.
It also supports qTranslate Services, that ables you to use professional human translation services with a few clicks, but I haven't used that yet.
A general note:
Do NOT auto translate your pages with Google Translate. This is basically spamming the google index.
If you want to autotranslate your page, use the google translate widget.
You can read that somewhere in the google guidelines too.
About your plugins:
qTranslate is fine and simple. But it does store all translations into one post. So if you later decide to change to a different plugin, you are toast.
I've heard about Multilingual, but I think it might still be a bit unstable.
The most commonly used is WPML. Might not be the best and it's not free. But it works and I have many clients that use it happily.
But again, DON'T auto translate your page. It's useless and will get you down ranked.
I have a mobile simulator at http://businessmobilewebsite.com/tester/ and was wondering if there is a script or way to populate the text field so that I can send a sampole of the customer mobile website to them.
Maybe I need to change it to a php file or something.
So I would like to send them to say
http://businessmobilewebsite.com/tester/?url=http://speedie.mobi/luchetti/#
Quentin
That website uses javascript within the page to load the entered URL within their "emulator" and does support passing parameters as the web page is not a "real" web form.
If you have a specific question about the functionality of a specific website, then why not contact them http://businessmobilewebsite.com/contact/
There are alternative online mobile emulators which do support the funcitonality you require, such as:
http://iphonetester.com/?url=http%3A%2F%2Fspeedie.mobi%2Fluchetti%2F
or
http://emulator.mtld.mobi/emulator.php?webaddress=speedie.mobi/luchetti/&emulator=sonyK750