https://github.com/ramsaylanier/wordexpress-tools
https://github.com/ramsaylanier/wordexpress-tools
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ramsaylanier/wordexpress-tools
- Owner: ramsaylanier
- Created: 2018-01-09T18:59:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-26T22:25:35.000Z (over 8 years ago)
- Last Synced: 2023-12-07T12:22:35.750Z (over 2 years ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 2
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: History.md
Awesome Lists containing this project
README
# wordexpress-tools
Various tools used in the [Vue](https://github.com/ramsaylanier/wordexpress-starter-vue) and [React](https://github.com/ramsaylanier/wordexpress-starter-react) WordExpress Starter Kits.
WordExpress Tools consist of the following:
- **WordExpress Helpers**: These are various helper functions used by the WordExpress starter kits. They do things like parse page/post content
- **WordExpress Shortcodes**: resolving functions that work with the WordExpress Database connectors to resolver GraphQL Queries
## Installation
```
npm install --save wordexpress-schema
```
## Usage
* [Using with Vue](#using-with-vue-starter-kit)
* [Custom Shortcodes](#custom-shortcodes)
## Using With Vue Starter Kit
Tools are used as part of the core Vue Starter Kit as a Vue plugin. The plugin is installed when creating the main Vue app, like so:
```es6
...
import {WordExpressShortcodes, WordExpressHelpers} from 'wordexpress-tools'
Vue.use(WordExpressPlugin, {
shortcodes: WordExpressShortcodes,
helpers: WordExpressHelpers
})
...
```
## Custom Shortcodes
You can add your own custom shortcodes and helpers by extending each object.
```es6
//my-custom-shortcode.js
import {GetShortCode} from 'wordexpress-tools'
const MyCustomShortcode = line => {
const shortcode = GetShortCode(line)
const {params, content} = shortcode
// return custom html here
return (`
${content}`)
}
export default MyCustomShortcode
```
Then, when you install the Vue plugin, simplty extend WordExpressShortcodes.
```es6
import {WordExpressShortcodes, WordExpressHelpers} from 'wordexpress-tools'
import MyCustomPlugin from './path/to/my-custom-plugin.js'
const shortcodes = {
...WordExpressShortcodes,
nameOfCustomShortcode: MyCustomShortcode
}
Vue.use(WordExpressPlugin, {
shortcodes,
helpers: WordExpressHelpers
})
```
Now, in your Wordpress WYSIWYG you can use something like `[nameOfCustomShortcodes param1="param"]content[/nameOfCustomShortcode]`. Please not that the name of the shortcode has to match the key in the extended shortcode object.