最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Visual Editor - use variable in link behind button

programmeradmin7浏览0评论

I am setting up a wordpress page for an artist who also offers Patreon subscriptions for additional content...

Patreon offers a plugin to connect your page using oauth2. It works well but we want to add a custom login button as the way they handle this in terms of UI is kind of horrible.

This button was easy enough to set up in the visual editor and works great! It is essentially just a button with a link behind it: /?patreon-login=yes&patreon-final-redirect=

On the end of the link you can set where you will be redirected to after the login... For now we just set it to the start page since that at least works. BUT we would like to use a variable there so the user would get sent back to the page where he clicked it! (It is kind of inconvenient otherwise..)

Is it possible to use a variable there in some way? I have already searched for plugins that could do this in some way. (found nothing which surprised me) And also for other scripted solutions for this but most of them recommend setting a bunch of custom page IDs but i don't know how that would help me as i don't want to manually edit the button for every page... (i just added it like this in the theme)

EDIT: To make the question a tiny bit clearer.. I need the solution to work in the "Site Editor"!

Solution i setteled on based on answer from @WebElaine:

<?php
/**
 * Plugin Name: Patreon Login Button
 * Description: "Fancy" Patreon login button that redirects back to the page where the button was Clicked. Inserted by using shortcode: [Patreon_Login_Button]
 * Version: 1.0.0
 */

// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) {
     exit;
}

// Create a shortcode.
add_shortcode( 'Patreon_Login_Button', 'shortcode_link' );

/**
 * Define what the shortcode does.
 *
 * @return string The output of the shortcode.
 */
function shortcode_link() {
     // Get the current URL.
     global $wp;
     $current_url = home_url( $wp->request );

     // Update this to whatever HTML output you want to display.
     // This example is a link tag with a CSS "button" class, but
     // you can make it anything you need.
     return '<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-background wp-element-button" href="' . esc_url( $WP_HOME ) . '/patreon-flow/?patreon-login=yes&amp;patreon-final-redirect=' . esc_url( $current_url ) . '" style="background-color:#f96854">Log in with patreon</a></div>';
}

I am setting up a wordpress page for an artist who also offers Patreon subscriptions for additional content...

Patreon offers a plugin to connect your page using oauth2. It works well but we want to add a custom login button as the way they handle this in terms of UI is kind of horrible.

This button was easy enough to set up in the visual editor and works great! It is essentially just a button with a link behind it: https://example/patreon-flow/?patreon-login=yes&patreon-final-redirect=https://example

On the end of the link you can set where you will be redirected to after the login... For now we just set it to the start page since that at least works. BUT we would like to use a variable there so the user would get sent back to the page where he clicked it! (It is kind of inconvenient otherwise..)

Is it possible to use a variable there in some way? I have already searched for plugins that could do this in some way. (found nothing which surprised me) And also for other scripted solutions for this but most of them recommend setting a bunch of custom page IDs but i don't know how that would help me as i don't want to manually edit the button for every page... (i just added it like this in the theme)

EDIT: To make the question a tiny bit clearer.. I need the solution to work in the "Site Editor"!

Solution i setteled on based on answer from @WebElaine:

<?php
/**
 * Plugin Name: Patreon Login Button
 * Description: "Fancy" Patreon login button that redirects back to the page where the button was Clicked. Inserted by using shortcode: [Patreon_Login_Button]
 * Version: 1.0.0
 */

// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) {
     exit;
}

// Create a shortcode.
add_shortcode( 'Patreon_Login_Button', 'shortcode_link' );

/**
 * Define what the shortcode does.
 *
 * @return string The output of the shortcode.
 */
function shortcode_link() {
     // Get the current URL.
     global $wp;
     $current_url = home_url( $wp->request );

     // Update this to whatever HTML output you want to display.
     // This example is a link tag with a CSS "button" class, but
     // you can make it anything you need.
     return '<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-background wp-element-button" href="' . esc_url( $WP_HOME ) . '/patreon-flow/?patreon-login=yes&amp;patreon-final-redirect=' . esc_url( $current_url ) . '" style="background-color:#f96854">Log in with patreon</a></div>';
}
Share Improve this question edited yesterday Daniel_MFG asked yesterday Daniel_MFGDaniel_MFG 133 bronze badges New contributor Daniel_MFG is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
Add a comment  | 

1 Answer 1

Reset to default 1

Not directly. Anything in the Editor is interpreted literally - you don't use variables there.

It sounds like you're using the Classic Editor - not blocks. If that's the case, you could create a simple plugin that sets up a shortcode. That way, you can put the shortcode in the Editor, and it will run code that can then grab the current URL and put it in the link.

  • Create a folder inside /wp-content/plugins/ - i.e. /wp-content/plugins/shortcode-link/
  • Create a file in the new folder - i.e. /wp-content/plugins/shortcode-link/shortcode-link.php
  • The new file will define the plugin and then the shortcode:
<?php
/**
 * Plugin Name: Shortcode Link
 * Version: 1.0.0
 */

// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) {
     exit;
}

// Create a shortcode.
add_shortcode( 'shortcode_link', 'shortcode_link' );

/**
 * Define what the shortcode does.
 *
 * @return string The output of the shortcode.
 */
function shortcode_link() {
     // Get the current URL.
     global $wp;
     $current_url = home_url( $wp->request );

     // Update this to whatever HTML output you want to display.
     // This example is a link tag with a CSS "button" class, but
     // you can make it anything you need.
     return '<a class="button" href="https://example/patreon-flow/?patreon-login=yes&patreon-final-redirect=' . esc_url( $current_url ) . '">Support us on Patreon</a>';
}

(Now activate the plugin, and you can paste [shortcode_link] in the Editor and it'll automatically output the code you set up. If you ever change that code it'll auto-update across every page you've already added it.)

If you're using blocks instead, you can use shortcodes, but it's even better to create a custom block that does the same thing. You'd probably want a ServerSideRender which would make it easy to grab the current URL in PHP, just like you would do with the shortcode, except then it'd appear in a block instead of just the shortcode which doesn't display its final output in the Editor.

发布评论

评论列表(0)

  1. 暂无评论