WPCommunity Shortlink Theme Component Usage Guide

Knowledge Base
,
1

WPCommunity Shortlink Theme Component User Guide

Component Overview

WPCommunity Shortlink is a Discourse theme component that allows users to obtain and copy a short link with one click on a topic page. Used in conjunction with a short link plugin on the WordPress side, it provides community members with a convenient content sharing experience.

Features

:link: One-Click Short Link Acquisition

  • Displays a “Short Link” button at the bottom of a topic
  • Clicking opens a modal showing the short link
  • One-click copy to clipboard

:clipboard: Intelligent Display

  • Display Format: wpcy.com/t/123 (without https://)
  • Copied Content: https://wpcy.com/t/123 (full URL)
  • Copy Feedback: Button text changes to “Copied ✓”

:globe_with_meridians: Multi-Language Support

  • Built-in Chinese and English interfaces
  • Automatically adapts to user language preference

Installation

Method 1: Install from Git Repository (Recommended)

  1. Go to the Discourse admin backend
  2. Navigate to Appearance → Themes
  3. Click Install → From Git Repository
  4. Enter the repository address:
    https://github.com/Cyberforums/discourse-shortlink-component
  5. Click “Install”

Method 2: Upload ZIP File

  1. Download the component ZIP package
  2. Go to the Discourse admin backend
  3. Navigate to Appearance → Themes
  4. Click Install → From Local File
  5. Select the ZIP file to upload

Enabling the Component

After installation, the component needs to be added to the currently used theme:

  1. Find your active theme in the theme list
  2. Click to enter the theme settings
  3. In the “Components” area, click “Add Component”
  4. Select “WPCommunity Shortlink”
  5. Save changes

Component Settings

Setting Default Value Description
short_domain wpcy.com The short link domain, used for generating short links

Modifying Settings

  1. Go to Appearance → Themes
  2. Find and click the “WPCommunity Shortlink” component
  3. Modify the configuration on the “Settings” tab
  4. Save changes

Usage

Obtaining a Topic Short Link

  1. Open any topic page
  2. Scroll to the bottom of the topic
  3. Find the “Short Link” button (link icon)
  4. Click the button
  5. In the pop-up modal, click the “Copy” button
  6. The short link is copied to the clipboard and can be pasted for sharing

Short Link Format

The short link format generated by the component is:

https://wpcy.com/t/topicID

For example, the short link for topic ID 123 is:

https://wpcy.com/t/123

Interface Display

Button at Topic Bottom

A link icon button will be displayed in the action bar at the bottom of the topic, showing “Get short link for this topic” on hover.

Modal

Clicking the button opens a modal containing:

  • Title: Topic Short Link
  • Input Field: Displays the short link (read-only)
  • Copy Button: Click to copy to clipboard
  • Close Button: Closes the modal

Technical Architecture

File Structure

discourse-shortlink-component/
├── about.json                           # Component metadata
├── settings.yml                         # Configuration options
├── README.md                            # Documentation
├── LICENSE                              # MIT License
├── common/
│   └── common.scss                      # Styles
└── javascripts/discourse/
    ├── api-initializers/
    │   └── shortlink-button.js          # Main entry & translation injection
    └── components/
        ├── shortlink-footer-button.js   # Bottom button logic
        ├── shortlink-footer-button.hbs  # Bottom button template
        ├── post-shortlink-button.gjs    # In-post button
        └── modal/
            └── shortlink-modal.gjs      # Modal component

Technology Stack

  • Glimmer Components: Uses Discourse’s latest .gjs format
  • Ember.js: Underlying framework
  • Discourse Plugin API: v0.11.1+

Compatibility

Item Version
Discourse Minimum Version 3.6.0
Discourse Tested Version 2026.1.0

Integration with WordPress Plugin

The short links generated by this component need to be used in conjunction with a short link plugin on the WordPress side:

  1. Discourse Side (this component): Generates short links
  2. WordPress Side (discourse-shortlinks.php): Handles redirection

Workflow:

User copies wpcy.com/t/123
        ↓
User shares with others
        ↓
Others visit wpcy.com/t/123
        ↓
WordPress plugin processes the request
        ↓
301 redirect to wpcommunity.com/t/-/123
        ↓
Opens Discourse topic page

Frequently Asked Questions

Q: Button not showing?

A: Please check:

  1. Whether the component has been added to the current theme
  2. Try a hard refresh of the page (Ctrl+Shift+R)
  3. Check the browser console for any errors

Q: Copy function not working?

A: Possible reasons:

  1. Browser does not support Clipboard API (requires HTTPS)
  2. Browser is blocking clipboard access
  3. Try manually selecting and copying the text

Q: How to customize the domain?

A: Modify the short_domain value in the component settings, and remember to update the configuration on the WordPress side as well.

Q: Can anonymous users see the button?

A: Yes, all users (including unlogged visitors) can see and use the short link feature.

Updating the Component

Updating from Git Repository

  1. Go to Appearance → Themes
  2. Find the “WPCommunity Shortlink” component
  3. Click the “Check for Updates” button
  4. If updates are available, click “Update”

Manual Update

  1. Delete the current component
  2. Reinstall from the Git repository

Development & Contribution

Local Development

# Clone repository
git clone https://github.com/Cyberforums/discourse-shortlink-component

# After modifying code, push
git add .
git commit -m "feat: New feature description"
git push origin main

Testing in Discourse

  1. Install the component (using the Git repository method)
  2. Modify the code and push
  3. Click “Check for Updates” in the Discourse admin backend
  4. Apply the update and refresh the page

Version History

  • v1.0.0 - Initial Release
    • Short link button at topic bottom
    • Modal display and copy function
    • Chinese and English interface support

Author: WPCommunity / Cyberforums
Open Source License: MIT
GitHub: discourse-shortlink-component