I created a link to connect the viber in wordpress. But it does not working.
<a href="href='//chat?number=xxxxxxxxxx'"/>xxxxxxxxxx</a>
In your theme functions.php (preferable child theme) use this to allow "viber" protocol:
add_filter( 'kses_allowed_protocols', function ( $protocols ) {
$protocols[] = 'viber';
return $protocols;
} );
Related
I'm currently using Angular for a few weeks for a small project and I wanted to add an anchor in my app.
So normally in order to add an anchor without using any framework, you'd create a block with an ID
<div id="top"> then you'd add an anchor tag <a href="#"> with the href attribute that would be equal to the ID of the block of the page we want to redirect the to.
ex:
<div id="top">...</div>
...
When we click on the link, it scrolls up to the page* to the block we defined the ID with.
*if we add in the CSS of the html or body tag scroll-behavior: smooth;
The issue is that when I add that inside my Angular template, it redirects me to the URL with the name of the ID on the href attribute!
If I take the previous example, here's what would happen:
localhost:4200/login → (click to the link) → localhost:4200/#top
Strangely it treats it as if it was a router link attribute
So I'm wondering how we could add an anchor in Angular
So I found a solution! (thanks to #Benjamin Looi for giving me the link to a relevant post)
So actually Angular has an issue with anchor tags when we want the user to another part of the same page
The solution is to use routerOptions of type extra options in the appRoutingModule and add in some options, here's the code:
const routes: Routes = [...];
const routerOptions: ExtraOptions = {
useHash: false,
anchorScrolling: 'enabled',
onSameUrlNavigation: 'reload' //Must have if you want to be able to use the anchor more than once
};
#NgModule({
imports: [RouterModule.forRoot(routes, routerOptions)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Then in the template, we have to add the anchor of the block we want to redirect the user in the attributes fragment with the name of the ID and routerLink with the page you're in (otherwise it will redirect to "/")
ex:
<a routerLink="/login" fragment="top"></a>
Now it will successfully redirect to the top of the page!
May be this might help
HTML code :
<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>
Ts code :
scrollToElement($element): void {
console.log($element);
$element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
got it from this
Using HTML anchor link #id in Angular 6
I have a project developed with nodejs and react js and a button that redirects me to http://localhost:3000/openProblemSetter with the following code :
codeProblem =() => {
localStorage.setItem('token', null);
this.props.history.push('/openProblemSetter');
}
<Button
className="button_style"
variant="contained"
color="default"
size="small"
onClick={this.codeProblem}
>
ADD
</Button>
I have another server running that opens http://localhost:8000/OpenProblemSetter
what can I do so the button redirects me to localhost:8000 and not localhost:3000 if that's possible
Method 1 : You can use location.assign('url') to navigate to a new page.
Method 2 : Or you also can use Redirect from React Router routing library. <Redirect to='url'/>
I am trying to convert my normal HTML website which consists of home, about, and T&C pages to WordPress, I have created the theme folder which Consists of index.php, functions.php, header.php, and footer.php files. So now my question is how can I add and link my other pages (about, T&C pages).
You have to use /* Template Name: Home */ on your custom page.
For more example:
see here
You need to register a menu see code below and link to Codex
function mytheme_register_nav_menu(){
register_nav_menus( array(
'primary_menu' => __( 'Primary Menu', 'text_domain' ),
'footer_menu' => __( 'Footer Menu', 'text_domain' ),
) );
}
add_action( 'after_setup_theme', 'mytheme_register_nav_menu', 0 );
https://developer.wordpress.org/reference/functions/register_nav_menus/
I know I can use react-document-title and react-helmet to change the page title. But I have a problem.
react-document-title can set the default page title like:
function App() {
// Use "My Web App" if no child overrides this
return (
<DocumentTitle title='My Web App'>
<SomeRouter />
</DocumentTitle>
);
}
Can react-helmet do the same thing?
In addition, from the example in github, both of them are using a static title. Can they do thing like youtube where the title is not static?
If you are in youtube main page, the page title show Youtube.
if you are watching a video, the page title shows the video's name with -youtube.
Obviously, - youtube is static, and the video's name is dynamic.
The goal is that I want to set the default title in router.js (like react-document-title), then if the component requires the title (default title plus the component's page title), change the page title. If it's not required, then use the default title using this code:
function App() {
// Use "My Web App" if no child overrides this
return (
<DocumentTitle title='My Web App'>
<Router path="/" component={Home} />
</DocumentTitle>
);
}
function HomePage() {
// Use "Home" while this component is mounted
return (
//trying to do something like this
<DocumentTitle title='${default title } -Home'>
// output: My Web App - Home
<h1>Home, sweet home.</h1>
</DocumentTitle>
);
}
Can you show the example, since I need it to understand this?
You can try document.title for changing the title of the page as the code below.
import React from 'react';
const DemoComponent= () => {
document.title = "This is demo Component";
return (
<div className="container">
<div className="row">
<h1> My Component</h1>
</div>
</div>
);
}
export default DemoComponent;
Here I have set the title of the page "This is demo Component". So, when this component is rendered, the title of the page will be changed.
Simply use this function which i customly built .
get the href location of your url.
split the path name
use it as your dynamic page title
const basename = (path) => { return path.split("/").reverse()[1] } const pageTitle = (typeof window !== 'undefined' )?basename(window.location.href): null
I am using polymer starter kit code and get the GUI with home, contact and user menu. I am using Java Dynamic Web Project in eclipse. So the base url is :
localhost:8080/TestProject/
When I click home after clicking contact or user menu then it changes the url to :
localhost:8080
I have tried to set default base url in app.js file as:
app.baseUrl = '/TestProject/';
But still the behaviour is the same.
If in routing.html, I make change like:
-
page('/TestProject/', function() {
app.route = 'home';
setFocus(app.route);
});
Nothing changes. But if I change in index.html:
<paper-menu class="app-menu" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="{{baseUrl}}TestProject">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
Then the home url becomes:
http://localhost:8080/TestProject/#!/TestProject/
But it should be:
http://localhost:8080/TestProject/
or
http://localhost:8080/TestProject/#!/home
Guys where am I going wrong. Or where should I make change to achieve the home url.
Thanks a lot.
Newer versions of the PSK have following section in the router.html:
// Removes end / from app.baseUrl which page.base requires for production
if (window.location.port === '') { // if production
page.base(app.baseUrl.replace(/\/$/, ''));
}
page('/',updateRedux, function() {
page.redirect('/start');
});
page(app.baseUrl,updateRedux, function() {
page.redirect('/start');
});